/* Structural styles for the five layouts. site.css holds the shared base and the ldg-* primitives; this file holds only what makes each structure recognisable. The layout key is a class on (lyt-bold, lyt-grid, lyt-catalog, lyt-split, lyt-conversion), and every block below is named for its layout, so a new layout is another file plus another block here — never a fork of the shared stylesheet. */ /* ========================================================================== Shared pieces used by layouts in more than one place ========================================================================== */ .lyt-body { min-height: 100vh; } /* Header navigation. Each layout tunes its own type treatment below. */ .lyt-nav { display: none; align-items: center; gap: 20px; font-size: 14px; font-weight: 650; } .lyt-nav a { color: var(--text-muted, #94A3B8); transition: color .18s ease; } .lyt-nav a:hover { color: var(--text-main, #F1F5F9); } .lyt-top-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; } .lyt-top-link .material-symbols-outlined { font-size: 18px; color: var(--accent-a); } .lyt-hero-lead { color: var(--text-muted, #94A3B8); font-size: clamp(1rem, 2.2vw, 1.12rem); } .lyt-btn-xl { min-height: 56px; padding: 16px 30px; font-size: 16px; border-radius: 14px; } .lyt-btn-round { border-radius: 999px; } .lyt-btn-block { width: 100%; } .lyt-head-center { margin-left: auto; margin-right: auto; text-align: center; } .lyt-widgets .ldg-widgets { align-items: stretch; } .lyt-faq .ldg-faq { max-width: 760px; margin: 0 auto; } /* ========================================================================== Layout «bold» — auto repair. Heavy borders, uppercase, one loud accent rail. ========================================================================== */ .lyt-bold .lyt-nav { text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; } .lyt-bold .ldg-mark { border-radius: 6px; } .lyt-hero-bold { position: relative; overflow: hidden; padding: 64px 0 52px; background: linear-gradient(180deg, var(--overlay-weak), transparent 70%); border-bottom: 1px solid var(--border-subtle); } .lyt-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); } .lyt-hero-bold-inner { position: relative; max-width: 68ch; } .lyt-hero-bold h1 { font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 16px; } .lyt-claims { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; padding-top: 22px; border-top: 2px solid var(--border-subtle); font-weight: 700; font-size: 14px; } .lyt-claims li { display: flex; align-items: center; gap: 8px; } .lyt-claims .material-symbols-outlined { font-size: 18px; color: var(--accent-a); } .lyt-slabs { display: grid; grid-template-columns: 1fr; gap: 18px; } .lyt-slab { position: relative; padding: 30px 24px 26px; border: 2px solid var(--border-subtle); border-radius: 10px; background: rgba(255, 255, 255, .02); } .lyt-slab-num { position: absolute; top: 18px; right: 20px; font-size: 2.6rem; font-weight: 900; line-height: 1; color: var(--border-subtle); } .lyt-slab .material-symbols-outlined { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 8px; font-size: 26px; color: var(--on-accent, #fff); background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); } .lyt-slab h3 { font-size: 1.12rem; font-weight: 800; margin-bottom: 8px; } .lyt-slab p { color: var(--text-muted, #94A3B8); font-size: 14.5px; } .lyt-detail-split { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; } .lyt-panel { padding: 26px 24px; border-radius: 12px; background: linear-gradient(135deg, var(--accent-soft), transparent); border: 2px solid var(--accent-line); } .lyt-panel li { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-weight: 700; border-bottom: 1px solid var(--border-subtle); } .lyt-panel li:last-child { border-bottom: 0; } .lyt-panel .material-symbols-outlined { font-size: 19px; color: var(--accent-a); } .lyt-order { display: grid; grid-template-columns: 1fr; gap: 0; } .lyt-order-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 2px solid var(--border-subtle); } .lyt-order-row:last-child { border-bottom: 2px solid var(--border-subtle); } .lyt-order-name { font-weight: 700; font-size: 1.02rem; } .lyt-order-name em { color: var(--text-dim, #64748B); font-style: normal; font-size: 13px; font-weight: 500; } .lyt-order-price { font-weight: 900; font-size: 1.1rem; white-space: nowrap; color: var(--accent-a); } /* ========================================================================== Layout «grid» — beauty salon. Airy, centred, staggered tiles. ========================================================================== */ .lyt-grid .lyt-nav { letter-spacing: .02em; } .lyt-hero-grid { position: relative; overflow: hidden; padding: 72px 0 56px; text-align: center; } .lyt-hero-center { position: relative; z-index: 1; /* The hero is a grid/flex column that shrinks to its content and is centred by its auto margins, so its children need explicit centring: `text-align` centres the inline text, but the badge and the CTA are flex containers and would otherwise stay pinned to the left edge of the shrunken column. */ display: flex; flex-direction: column; align-items: center; max-width: 48ch; margin: 0 auto; text-align: center; } .lyt-hero-grid h1 { font-size: clamp(2rem, 5.4vw, 3.1rem); font-weight: 800; margin-bottom: 18px; } .lyt-hero-grid .lyt-hero-lead { margin-bottom: 28px; } .lyt-hero-grid .ldg-badge { margin-left: auto; margin-right: auto; } .lyt-stagger { display: grid; grid-template-columns: 1fr; gap: 18px; } .lyt-tile { padding: 30px 24px; border-radius: 26px; background: var(--surface-strong); border: 1px solid var(--border-subtle); } .lyt-tile .material-symbols-outlined { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 18px; border-radius: 50%; font-size: 26px; color: var(--on-accent, #fff); background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); } .lyt-tile h3 { font-size: 1.08rem; margin-bottom: 8px; } .lyt-tile p { color: var(--text-muted, #94A3B8); font-size: 14.5px; } .lyt-gallery { display: grid; grid-template-columns: 1fr; gap: 16px; } .lyt-plate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 190px; margin: 0; border-radius: 22px; padding: 20px; color: var(--text-muted, #94A3B8); background: linear-gradient(160deg, var(--accent-soft), transparent); border: 1px solid var(--border-subtle); } .lyt-plate .material-symbols-outlined { font-size: 34px; color: var(--text-dim, #64748B); } .lyt-plate figcaption { font-weight: 650; text-align: center; } .lyt-plate-2 { min-height: 230px; } .lyt-list-narrow { max-width: 660px; } .lyt-quiet { display: grid; gap: 0; } .lyt-quiet li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 2px; border-bottom: 1px solid rgba(255, 255, 255, .09); } .lyt-quiet-name { font-weight: 600; } .lyt-quiet-name em { color: var(--text-dim, #64748B); font-style: normal; font-size: 12.5px; } .lyt-quiet-price { font-weight: 750; white-space: nowrap; } /* ========================================================================== Layout «catalog» — restaurant. Compact hero, sticky category bar, dense rows. ========================================================================== */ .lyt-hero-compact { padding: 40px 0 34px; border-bottom: 1px solid var(--border-subtle); } .lyt-hero-compact-inner { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; } .lyt-hero-compact h1 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); font-weight: 800; margin-bottom: 12px; } .lyt-hero-compact .ldg-badge { margin-bottom: 16px; } .lyt-inline-cards { display: grid; grid-template-columns: 1fr; gap: 14px; } .lyt-inline-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: 14px; background: var(--surface-strong); border: 1px solid var(--border-subtle); } .lyt-inline-card .material-symbols-outlined { flex: none; font-size: 24px; color: var(--accent-a); } .lyt-inline-card h3 { font-size: 1rem; margin-bottom: 5px; } .lyt-inline-card p { color: var(--text-muted, #94A3B8); font-size: 13.8px; } .lyt-detail-sticky { position: sticky; top: 64px; z-index: 20; padding: 12px 0; background: var(--bg-deep); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .lyt-chips { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0; } .lyt-chip { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 9px 15px 9px 11px; border-radius: 999px; background: var(--overlay-weak); border: 1px solid var(--border-active); font-size: 13.5px; font-weight: 650; white-space: nowrap; } .lyt-chip:hover { border-color: var(--accent-a); } .lyt-chip .material-symbols-outlined { font-size: 17px; color: var(--accent-a); } .lyt-detail-note { margin-top: 10px; color: var(--text-dim, #64748B); font-size: 13px; } .lyt-menu { display: grid; grid-template-columns: 1fr; gap: 10px; } .lyt-menu-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px; padding: 15px 18px; border-radius: 12px; background: var(--surface-strong); border: 1px solid var(--border-subtle); } .lyt-menu-name { font-weight: 650; } .lyt-menu-note { grid-column: 1; color: var(--text-dim, #64748B); font-size: 12.5px; } .lyt-menu-price { grid-row: 1 / span 2; grid-column: 2; justify-self: end; padding: 7px 13px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); font-weight: 800; white-space: nowrap; } /* ========================================================================== Layout «split» — Layout Split, colour identity "Vibrant Catalog". A split layout runs edge to edge: the hero is two columns across the whole viewport, and every section below it drops the shared 1140px content cap that the other four layouts keep. `.ldg-wrap` supplies the horizontal padding, so nothing touches the viewport edge while the page still spans its full width. The selectors are scoped with `.ldg-wrap` on purpose. `lyt-split` is also the layout key that sits on , so an unscoped `.lyt-split` matched the document element — and the desktop `grid-template-columns: repeat(2, …)` then turned the page itself into a two-column grid, leaving in the first track at half the viewport width. One column on a phone, two from the tablet breakpoint up. The grid's tracks are `minmax(0, …)`, so a long address or price cannot push a column — and with it the whole grid — wider than the page. ========================================================================== */ .lyt-hero-split { padding: 52px 0 46px; } /* Scoped to `.ldg-wrap` deliberately: `lyt-split` is *also* the layout key that sits on (``). An unscoped `.lyt-split` selector therefore matched the document element, and the desktop `grid-template-columns: repeat(2, …)` below turned the whole page into a two-column grid — landed in the first track and the entire site rendered at half the viewport width. */ .ldg-wrap.lyt-split { display: grid; width: 100%; max-width: none; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: center; padding: 0 clamp(20px, 4vw, 72px); } /* Every column on this layout runs edge to edge, not just the hero: the 1140px cap is the other four layouts' content measure. Only horizontal padding is set, so a wrapper that brings its own vertical padding (the header) keeps it. */ .lyt-split .ldg-wrap { width: 100%; max-width: none; padding-left: clamp(20px, 4vw, 72px); padding-right: clamp(20px, 4vw, 72px); } /* The columns are grid items, so they must be allowed to shrink below their content width instead of forcing the shared track wider. */ .ldg-wrap.lyt-split > * { min-width: 0; } .lyt-split-main h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); font-weight: 800; margin-bottom: 16px; } .lyt-split-main .lyt-hero-lead { margin-bottom: 26px; } .lyt-split-card { padding: 28px 26px; border-radius: 14px; background: var(--surface-strong); border: 1px solid var(--border-active); border-left: 4px solid var(--accent-a); } .lyt-split-card h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; color: var(--text-muted, #94A3B8); } .lyt-split-card li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-subtle); } .lyt-split-card li:last-of-type { border-bottom: 0; } .lyt-split-card .material-symbols-outlined { font-size: 18px; color: var(--accent-a); } .lyt-split-addr { margin-top: 16px; color: var(--text-dim, #64748B); font-size: 13px; } .lyt-cases { display: grid; grid-template-columns: 1fr; gap: 18px; } .lyt-case { padding: 24px 22px; border-left: 3px solid var(--accent-a); background: linear-gradient(90deg, var(--accent-soft), transparent 60%); } .lyt-case .material-symbols-outlined { font-size: 24px; color: var(--accent-a); margin-bottom: 12px; display: block; } .lyt-case h3 { font-size: 1.06rem; margin-bottom: 7px; } .lyt-case p { color: var(--text-muted, #94A3B8); font-size: 14.5px; } .lyt-table { width: 100%; border-collapse: collapse; } .lyt-table th, .lyt-table td { padding: 15px 4px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-subtle); font-size: 15px; } .lyt-table th { font-weight: 650; } .lyt-table th em { color: var(--text-dim, #64748B); font-style: normal; font-size: 12.5px; font-weight: 500; } .lyt-table td { text-align: right; color: var(--text-muted, #94A3B8); } .lyt-table-price td { font-weight: 800; color: var(--accent-a); white-space: nowrap; } /* ========================================================================== Layout «conversion» — cleaning. Capture panel, step flow, tier cards. ========================================================================== */ .lyt-hero-capture { position: relative; overflow: hidden; padding: 56px 0 48px; } .lyt-capture { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; } .lyt-capture-main h1 { font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 800; margin-bottom: 16px; } .lyt-capture-panel { padding: 28px 26px; border-radius: 20px; background: var(--surface-card); border: 1px solid var(--accent-line); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); } .lyt-capture-panel h2 { font-size: 1.3rem; margin-bottom: 10px; } .lyt-capture-panel > p { color: var(--text-muted, #94A3B8); margin-bottom: 20px; } .lyt-trust { display: grid; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-subtle); } .lyt-trust li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; } .lyt-trust .material-symbols-outlined { font-size: 18px; color: #6EE7B7; } .lyt-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0; padding: 0; } .lyt-step { position: relative; padding: 26px 22px 24px; border-radius: 18px; background: var(--surface-strong); border: 1px solid var(--border-subtle); } .lyt-step-num { position: absolute; top: -14px; left: 22px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); color: var(--on-accent, #fff); font-weight: 800; font-size: 14px; } .lyt-step .material-symbols-outlined { font-size: 26px; color: var(--accent-a); display: block; margin: 12px 0 12px; } .lyt-step h3 { font-size: 1.05rem; margin-bottom: 7px; } .lyt-step p { color: var(--text-muted, #94A3B8); font-size: 14.5px; } .lyt-detail-checklist { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; } .lyt-checklist { display: grid; gap: 12px; } .lyt-checklist li { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; background: var(--surface-strong); border: 1px solid var(--border-subtle); font-weight: 600; } .lyt-checklist .material-symbols-outlined { font-size: 20px; color: #6EE7B7; } .lyt-tiers { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: stretch; } .lyt-tier { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; border-radius: 20px; background: var(--surface-strong); border: 1px solid var(--border-subtle); } .lyt-tier.is-featured { background: linear-gradient(180deg, var(--accent-soft), transparent); border-color: var(--accent-line); box-shadow: var(--card-shadow); } .lyt-tier h3 { font-size: 1.05rem; } .lyt-tier-price { font-size: 1.7rem; font-weight: 900; } .lyt-tier-note { color: var(--text-dim, #64748B); font-size: 13px; } .lyt-tier .ldg-btn { margin-top: auto; } /* ========================================================================== Desktop ========================================================================== */ @media (min-width: 760px) { .lyt-nav { display: flex; } .lyt-slabs { grid-template-columns: repeat(3, 1fr); } .lyt-order { grid-template-columns: repeat(2, 1fr); column-gap: 40px; } .lyt-stagger { grid-template-columns: repeat(3, 1fr); align-items: start; } /* The stagger: every second tile sits lower, which is the layout's signature. */ .lyt-tile:nth-child(2) { margin-top: 34px; } .lyt-gallery { grid-template-columns: repeat(3, 1fr); align-items: start; } .lyt-gallery .lyt-plate { max-width: 100%; } .lyt-plate-2 { margin-top: 28px; } .lyt-list-narrow { margin: 0 auto; } .lyt-hero-compact-inner { flex-direction: row; align-items: center; justify-content: space-between; } .lyt-inline-cards { grid-template-columns: repeat(3, 1fr); } .lyt-menu { grid-template-columns: repeat(2, 1fr); } /* The split hero becomes two equal columns at the desktop breakpoint; the scoped `.ldg-wrap.lyt-split` base rule keeps the single stacked column below it. */ .ldg-wrap.lyt-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lyt-cases { grid-template-columns: repeat(3, 1fr); } .lyt-capture { grid-template-columns: 1.1fr .9fr; } .lyt-steps { grid-template-columns: repeat(3, 1fr); } .lyt-detail-checklist { grid-template-columns: .95fr 1.05fr; } .lyt-tiers { grid-template-columns: repeat(3, 1fr); } .lyt-detail-split { grid-template-columns: 1.1fr .9fr; } } @media (max-width: 860px) { /* The sticky category bar would eat a phone screen; let it scroll with the page. */ .lyt-detail-sticky { position: static; } } /* ========================================================================== Palette-aware form chrome The admin panel and the classic dark layouts assume a dark field. On a light palette the browser's default dark text on our own light surface would be unreadable, so the theme colour and the selection highlight are stated once here for every layout. `color-scheme` is the hint the browser needs to paint its own widgets (scrollbars, date pickers) to match. ========================================================================== */ .ldg-top { background: color-mix(in srgb, var(--bg-deep) 92%, transparent); } ::selection { background: var(--accent-a); color: var(--on-accent, #fff); } /* ========================================================================== Tablet band Between the phone layout and the full desktop grid the three-column blocks were previously either one enormous tile per row or three squeezed ones. Two columns is the honest middle: it keeps the stagger visible without crushing the type. ========================================================================== */ @media (min-width: 700px) and (max-width: 899px) { .lyt-gallery, .lyt-stagger, .lyt-cases, .lyt-steps, .lyt-inline-cards, .lyt-tiers, .lyt-slabs { grid-template-columns: repeat(2, 1fr); } /* The stagger is the grid layout's signature; keep it in the two-column band too. */ .lyt-tile:nth-child(2) { margin-top: 26px; } .lyt-tile:nth-child(3) { margin-top: 0; } .lyt-plate-2 { margin-top: 20px; } /* `.lyt-split` is deliberately absent: two columns is the whole point of the split layout, and 700–899px holds two columns comfortably. Its base rule still stacks it on a phone. */ .lyt-detail-split, .lyt-detail-checklist, .lyt-capture { grid-template-columns: 1fr; } } /* A viewport too narrow for the two-column hero: the facts card goes under the argument instead of the two columns fighting for 320px. */ @media (min-width: 1000px) and (max-width: 1120px) { .ldg-wrap.lyt-split { gap: 22px; } }