/* ============================================================= Mobile.css — uses container queries on so styles fire regardless of viewport (mobile preview pane constrains but viewport stays desktop-wide → media queries don't trigger). Breakpoints (consistent throughout): ≤ 960 tablet collapse 4/5-col grids to 2-col, hide nav ≤ 720 phablet hide search, show hamburger, footer 2-col ≤ 520 mobile single-col everywhere, full-bleed CTAs ≤ 380 small tightest gutters, smallest type The prototype's custom hamburger (.menu-btn) + drawer (.mobile-drawer) are NOT carried: core/navigation provides the mobile overlay natively (conscious WP adaptation). ============================================================= */ /* NB: breakpoints are plain @media (viewport). A body-level `container-type` was removed — it made the containing block for every position:fixed descendant, which trapped the mobile nav overlay inside the header box. */ /* Pre-empt horizontal overflow at the document level. */ html, body { overflow-x: hidden; } /* ============================================================ ≤ 960px — tablet ============================================================ */ @media (max-width: 960px) { .container { padding-left: 20px; padding-right: 20px; } /* core/navigation handles mobile itself (hamburger overlay) — do NOT hide it. (was: .header nav { display:none } for the old custom nav + .mobile-drawer) */ .header .search { width: 200px; } /* Generic grid collapses */ .hero .grid { grid-template-columns: 1fr; gap: 32px; } .hero h1 { font-size: 44px; } .cats { grid-template-columns: repeat(2, 1fr); } .featured-grid, .results-grid { grid-template-columns: repeat(2, 1fr); } .services-grid { grid-template-columns: 1fr; } .lst-shell { grid-template-columns: 1fr; } .filters { display: none; } .adminpeek { grid-template-columns: 1fr; } .footer .grid { grid-template-columns: 1fr 1fr; gap: 28px; } .footer .brandcol { grid-column: 1 / -1; } /* Trust strip */ .trust { grid-template-columns: 1fr 1fr; } .trust .cell { border-right: 0; border-bottom: 1px solid var(--line); } .trust .cell:nth-child(odd) { border-right: 1px solid var(--line); } .trust-stats { grid-template-columns: repeat(2, 1fr); } .tstat:nth-child(odd) { border-right: 1px solid var(--line); } .tstat:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .tstat:nth-child(even) { border-right: 0; } /* Editorial hero — photo full bleed; content inside .container gutter. The frame is also .container, so set only top/bottom padding; the container's 16px side gutter on mobile gives the inner content the same offset as the header. */ .hero-editorial { min-height: auto; } .hero-editorial-frame { grid-template-columns: 1fr !important; gap: 24px !important; padding-top: 56px !important; padding-bottom: 36px !important; } .hero-editorial-copy { max-width: 100%; } .hero-editorial-copy h1 { font-size: 44px; } .hero-editorial-rail { align-items: flex-start; min-width: 0; } .hero-editorial-stamp { width: 100%; } /* Ledger hero */ .hero-ledger .grid { grid-template-columns: 1fr; } .hero-ledger .titles h1 { font-size: 56px; } /* Schematic hero */ .hero-schem .grid { grid-template-columns: 1fr; } .hero-schem .copy h1 { font-size: 40px; } /* Service variants */ .svc-editorial .grid { grid-template-columns: repeat(2, 1fr); } .svc-schem .grid { grid-template-columns: 1fr; } .svc-schem .card { grid-template-columns: 1fr; } /* Trust photo */ .trust-photo { padding: 56px 0; } .trust-photo-grid { grid-template-columns: 1fr; gap: 28px; } /* Domains, process, portfolio */ .domains-grid { grid-template-columns: 1fr; } .trust-v2-grid { grid-template-columns: 1fr; gap: 32px; } .process-flow { grid-template-columns: 1fr 1fr; gap: 32px 0; } .process-flow::before { display: none; } .portfolio-grid { grid-template-columns: 1fr 1fr; } .portfolio-grid > :nth-child(3) { grid-column: 1 / -1; } .process-list { grid-template-columns: 1fr 1fr; } .process-step + .process-step { border-left: none; padding-left: 0; } .process-step:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 24px; } .process-step:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 4px; } /* Brand strip */ .brand-strip-inner { grid-template-columns: 1fr; gap: 14px; } } /* ============================================================ ≤ 720px — phablet — hamburger appears here ============================================================ */ @media (max-width: 720px) { .container { padding-left: 16px; padding-right: 16px; } /* Hide search input (core/navigation shows its own hamburger here) */ .header .search { display: none; } .header .row { gap: 10px; } .header .actions { gap: 4px; margin-left: auto; } .header .icon-btn { width: 40px; height: 40px; } .header .logo { margin-left: 4px; } .header .logo img { height: 28px; } /* Utility bar — keep address + EE/EN on mobile; hide the verbose status line and emergency phone. */ .utilbar { padding: 7px 16px; } /* keep the content gutter (matches .container) — was 0 → text hit the edges */ .utilbar .utilbar-inner { gap: 12px; flex-wrap: nowrap; justify-content: space-between; } .utilbar .item { font-size: 11px; min-width: 0; } .utilbar .item.dot, /* "Vaba paigaldusaeg…" — hide */ .utilbar .item:nth-last-child(2) { /* "Avariiliin 24/7…" — hide */ display: none; } .utilbar .item:nth-child(2) { /* "Kadaka tee 42b…" — keep, fit */ flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .utilbar .item:last-child { /* "EE / EN" — keep, no shrink */ flex: 0 0 auto; } .utilbar .spacer { display: none; } /* Hero editorial — hide the "Paigaldatud objekt" stamp on mobile, keep the 3-stat meta row visible. */ .hero-editorial-stamp { display: none; } .hero-editorial-rail { gap: 0; } /* Hero — tighter */ .hero h1 { font-size: 36px; } .hero .lead { font-size: 15px; } /* Editorial hero — keep photo full-bleed; content respects .container gutter */ .hero-editorial { min-height: auto; } .hero-editorial-frame { padding-top: 40px !important; padding-bottom: 28px !important; gap: 20px !important; } .hero-editorial-copy h1 { font-size: 36px !important; line-height: 1.05; } .hero-editorial-copy .lede { font-size: 14px; margin-bottom: 18px; } .hero-editorial-copy .ctas { flex-wrap: wrap; } /* 3 stats in a single row — compact, mono */ .hero-editorial-meta { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; } .hero-editorial-meta .stat { padding: 0 10px; border-left: 1px solid rgba(255,255,255,0.2); min-width: 0; } .hero-editorial-meta .stat:first-child { border-left: none; padding-left: 0; } .hero-editorial-meta .stat:last-child { padding-right: 0; } .hero-editorial-meta .stat .num { font-size: 18px; } .hero-editorial-meta .stat .lbl { font-size: 10px; line-height: 1.3; } .hero-ledger { padding: 56px 0 44px; } .hero-ledger .titles h1 { font-size: 44px; } .hero-schem { padding: 40px 0 36px; } .hero-schem .copy h1 { font-size: 32px; } /* Service variants → 1 col */ .svc-editorial .grid { grid-template-columns: 1fr; } /* Section head (services + portfolio): stack the "see all" link below the heading on mobile. The block-layout flex row (space-between, nowrap) otherwise squeezes the link into a ~70px column and "Kõik teenused →" / "Vaata kõiki töid →" wrap to 3 lines. `.container .home-head` (0,2,0) beats the generated `.wp-container-*` flex class (0,1,0). */ .container .home-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } /* Featured + categories — keep 2-col on phablet */ .featured-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .results-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .cats { grid-template-columns: repeat(2, 1fr); gap: 10px; } /* Process strip + flow */ .process-strip { padding: 28px 0 32px; } .process-list { grid-template-columns: 1fr; } .process-step + .process-step { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 6px; } .process-pair + .process-pair > .process-step:first-child { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 6px; } .process-step:nth-child(2n) { border-left: none; padding-left: 0; } .process-step:nth-child(n+3) { margin-top: 6px; } .process-flow { grid-template-columns: 1fr; gap: 20px; } /* Trust + Trust-stats reduce */ .trust-stats { grid-template-columns: 1fr 1fr; } .tstat { padding: 22px 18px; } .tstat .num { font-size: 36px; } .tstat .lbl { font-size: 13px; } .trust .cell { padding: 18px 18px; } /* Footer */ .footer { padding: 44px 0 24px; margin-top: 48px; } .footer .grid { grid-template-columns: 1fr 1fr; gap: 24px; } .footer .brandcol { grid-column: 1 / -1; } .footer h5 { margin-bottom: 10px; } .footer ul { gap: 6px; } .footer .partners { gap: 14px 18px; margin-top: 28px; } .footer .legal { flex-direction: column; gap: 6px; } /* AI assistant — keep small on mobile */ .ai-pill { bottom: 14px; right: 14px; padding: 8px 12px 8px 10px; font-size: 12px; } .ai-pill .label { display: none; } .ai-panel { width: calc(100vw - 16px); right: 8px; bottom: 8px; height: calc(100vh - 80px); max-height: calc(100dvh - 80px); } /* Listing head */ .lst-head { padding: 16px 0; } .lst-head .meta { flex-wrap: wrap; gap: 8px; } .lst-head h1, .lst-head .h1 { font-size: 28px; } .results-head { flex-wrap: wrap; } /* Cart, account, checkout layout — prototype shell classes; fire only when templates carry them (live Woo responsive is in bridge.css). */ .cart-shell, .checkout-shell, .account-shell { grid-template-columns: 1fr; gap: 24px; } /* Hero-ticket — stacked */ .hero-ticket .ticket-foot { grid-template-columns: 1fr 1fr; } .hero-ticket .ticket-cell { border-bottom: 1px solid var(--line); } .hero-ticket .ticket-cell:nth-child(odd) { border-right: 1px solid var(--line); } .hero-ticket .ticket-cell:last-child { border-right: 0; } /* Domain rows */ .domain-body { padding: 16px 18px 18px; } .domain-row-top { flex-wrap: wrap; } /* ----- Inline-styled grids on screen pages collapse to 1 col ----- */ .pdp-screen > div[style*="grid-template-columns"], .cart-screen > div[style*="grid-template-columns"], .checkout-screen > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 28px !important; } /* PDP inner sections */ .pdp-screen [style*="minmax(0,1fr) minmax(0,1fr)"], .pdp-screen [style*="minmax(0, 1fr) minmax(0, 1fr)"] { grid-template-columns: 1fr !important; } .pdp-screen [style*="76px minmax(0, 1fr)"] { grid-template-columns: 64px minmax(0,1fr) !important; } .pdp-screen [style*="repeat(3, 1fr)"] { grid-template-columns: 1fr 1fr !important; } .pdp-screen [style*="1fr 1fr 1fr"] { grid-template-columns: 1fr !important; } .pdp-screen h1 { font-size: 28px !important; } /* Grid items must shrink — tables/etc otherwise hold the column open */ .pdp-screen [style*="display: grid"] > *, .cart-screen [style*="display: grid"] > *, .checkout-screen [style*="display: grid"] > *, .account-screen [style*="display: grid"] > * { min-width: 0 !important; } /* Tables — make them responsive */ .pdp-screen table, .cart-screen table, .checkout-screen table { width: 100% !important; table-layout: fixed; } .pdp-screen td, .pdp-screen th { word-break: break-word; overflow-wrap: anywhere; } .pdp-screen img, .cart-screen img, .checkout-screen img { max-width: 100%; height: auto; } /* Tab bar / horizontal lists wrap */ .pdp-screen [style*="align-items: baseline"] { flex-wrap: wrap; row-gap: 8px; } .pdp-screen [style*="flex-wrap"][style*="alignItems"] { flex-wrap: wrap; } /* Account / Checkout: make every inline-flex row wrap */ .account-screen [style*="display: flex"]:not([style*="flex-direction"]) { flex-wrap: wrap; } .account-screen [style*="display: flex"][style*="align-items: flex-start"] { flex-wrap: wrap; } .checkout-screen [style*="display: flex"]:not([style*="flex-direction"]) { flex-wrap: wrap; } /* Long words / urls break */ .account-screen, .checkout-screen, .pdp-screen, .cart-screen { word-break: break-word; overflow-wrap: anywhere; } /* Cart rows: image / text / qty / price → stack to 2 cols */ .cart-screen [style*="104px 1fr 140px 100px"] { grid-template-columns: 80px 1fr !important; gap: 14px !important; row-gap: 6px !important; } .cart-screen [style*="repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; } /* Checkout inner sections */ .checkout-screen [style*="minmax(0,1fr) minmax(0,1fr)"] { grid-template-columns: 1fr !important; } .checkout-screen [style*="repeat(5, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } .checkout-screen [style*="56px 1fr auto"] { gap: 10px !important; } /* Account */ .account-screen [style*="260px 1fr"] { grid-template-columns: 1fr !important; } .account-screen [style*="minmax(0,1fr) minmax(0,1fr)"] { grid-template-columns: 1fr !important; } .account-screen [style*="repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; } /* Generic crumbs wrap */ .crumbs { flex-wrap: wrap; row-gap: 4px; font-size: 12px; } /* Screen container padding */ .screen-container { padding-left: 16px; padding-right: 16px; } /* Stop sections jumping by enforcing consistent vertical rhythm */ section { padding-top: clamp(36px, 8vw, 56px); padding-bottom: clamp(36px, 8vw, 56px); } } /* ============================================================ ≤ 520px — mobile ============================================================ */ @media (max-width: 520px) { .container { padding-left: 16px; padding-right: 16px; } /* Utility bar — even tighter at narrow widths */ .utilbar .item:nth-child(2) { max-width: 60vw; } /* Headlines */ .hero h1 { font-size: 30px; } .hero-editorial-copy h1 { font-size: 30px !important; } .hero-ledger .titles h1 { font-size: 36px; } .hero-schem .copy h1 { font-size: 28px; } /* Featured/results/cats — keep 2-col cards but smaller */ .featured-grid, .results-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .cats { grid-template-columns: 1fr; gap: 10px; } /* Trust collapses to single column */ .trust { grid-template-columns: 1fr; } .trust .cell { border-right: 0 !important; border-bottom: 1px solid var(--line); } .trust .cell:last-child { border-bottom: 0; } .trust-stats { grid-template-columns: 1fr; } .tstat { border-right: 0 !important; border-bottom: 1px solid var(--line); } .tstat:last-child { border-bottom: 0; } /* Footer collapse fully */ .footer .grid { grid-template-columns: 1fr; gap: 24px; } .footer .brandcol { grid-column: auto; } /* Service editorial / schematic card padding */ .svc-editorial .card .body { padding: 14px 14px 16px; } .svc-schem .body { padding: 16px 16px; } /* Hero ticket — single column footer */ .hero-ticket .ticket-foot { grid-template-columns: 1fr; } .hero-ticket .ticket-cell { border-right: 0 !important; } .hero-ticket .ticket-cell:last-child { border-bottom: 0; } .hero-ticket .ticket-title { font-size: 18px; } .hero-ticket .ticket-body { padding: 18px 18px 6px; } /* Portfolio + process */ .portfolio-grid { grid-template-columns: 1fr; } .portfolio-grid > :nth-child(3) { grid-column: auto; } /* Product card text */ .pcard .body { padding: 12px; } .pcard .name { font-size: 14px; min-height: auto; } .pcard .specs { font-size: 11px; } .pcard .price { font-size: 15px; } /* PDP */ .pdp-shell { grid-template-columns: 1fr !important; gap: 20px; } .pdp-gallery { aspect-ratio: 4 / 3; } /* Cart drawer full width */ .cartdrawer-panel { width: 100% !important; max-width: 100% !important; } /* Buttons full-width where stacked */ .hero .ctas, .hero-editorial-copy .ctas, .hero-schem .copy .ctas, .hero-ledger .ctas { flex-direction: column; align-items: stretch; } .hero .ctas .btn, .hero-editorial-copy .ctas .btn, .hero-schem .copy .ctas .btn, .hero-ledger .ctas .btn { width: 100%; } /* Tweaks panel — fit narrower screens */ .twk-panel { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; right: 12px !important; } } /* ============================================================ ≤ 380px — small phones (iPhone SE, etc.) ============================================================ */ @media (max-width: 380px) { .container { padding-left: 14px; padding-right: 14px; } .hero h1, .hero-editorial-copy h1 { font-size: 28px !important; } .hero-ledger .titles h1 { font-size: 32px; } .featured-grid, .results-grid { grid-template-columns: 1fr; } .header .icon-btn { width: 36px; height: 36px; } .header .logo img { height: 26px; } } /* ============================================================ FALLBACK media queries (in case @container is unsupported) ============================================================ */ @media (max-width: 720px) { .header .search { display: none; } .utilbar .spacer { display: none; } } /* ============================================================ Internal (WordPress) content pages — responsive. pg-* classes; container queries on . ============================================================ */ @media (max-width: 960px) { .pg-wrap { padding-left: 20px; padding-right: 20px; } .pg-hero h1 { font-size: 40px; } .pg-lede-block .pg-lede-grid { grid-template-columns: 1fr; gap: 32px; } .pg-svc-grid { grid-template-columns: 1fr; } .pg-proj-grid { grid-template-columns: repeat(2, 1fr); } .pg-blog-grid { grid-template-columns: repeat(2, 1fr); } .pg-case-grid { grid-template-columns: 1fr; gap: 28px; } .pg-case-specs { position: static; } .pg-contact-grid { grid-template-columns: 1fr; gap: 32px; } .pg-values { grid-template-columns: 1fr; } .pg-team { grid-template-columns: repeat(2, 1fr); } .pg-plans { grid-template-columns: 1fr; } .pg-plan.featured { order: -1; } .pg-faq-layout { grid-template-columns: 1fr; gap: 0; } .pg-faq-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .pg-faq-nav a { border-left: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 14px; } .pg-faq-nav a.active { border-color: var(--ink); background: var(--ink); color: #fff; } } @media (max-width: 720px) { .pg-wrap { padding-left: 16px; padding-right: 16px; } /* Page hero */ .pg-hero-inner { padding-top: 28px; padding-bottom: 30px; } .pg-hero.ink .pg-hero-inner { padding-top: 44px; padding-bottom: 46px; } .pg-hero h1 { font-size: 32px; } .pg-hero .pg-hero-lede { font-size: 15px; } .pg-hero-row { flex-direction: column; align-items: stretch; gap: 20px; } .pg-hero-actions .btn { width: 100%; } .pg-hero.ink .pg-hero-photo::after { background: linear-gradient(180deg, rgba(4,24,40,0.7) 0%, rgba(4,24,40,0.85) 100%); } /* Service cards — icon strip on top, not side */ .pg-svc-card { grid-template-columns: 1fr; } .pg-svc-card .pg-svc-ic { min-height: 90px; } /* Service index rows → stack */ .pg-svc-row { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; } .pg-svc-row:hover { padding-left: 0; } .pg-svc-row .pg-svc-no { display: none; } .pg-svc-row .pg-svc-name { font-size: 19px; } .pg-svc-row .pg-svc-arrow { justify-content: space-between; margin-top: 4px; } /* Steps band → single column */ .pg-steps { grid-template-columns: 1fr; } .pg-step { border-right: none; border-bottom: 1px solid var(--line); } .pg-step:last-child { border-bottom: none; } /* Projects + blog → single column */ .pg-proj-grid { grid-template-columns: 1fr; gap: 16px; } .pg-blog-grid { grid-template-columns: 1fr; gap: 24px; } /* Featured blog → stack */ .pg-blog-featured { grid-template-columns: 1fr; } .pg-blog-featured .pg-bf-photo { min-height: 200px; aspect-ratio: 16 / 9; } .pg-blog-featured .pg-bf-body { padding: 24px 20px; } .pg-blog-featured h2 { font-size: 24px; } /* Case detail */ .pg-case-hero { aspect-ratio: 16 / 10; } .pg-quote p { font-size: 19px; } .pg-gallery { grid-template-columns: 1fr 1fr; } /* Article */ .pg-article { display: block; padding: 32px 0 48px; } .pg-article p { font-size: 16px; } .pg-article .pg-article-lead { font-size: 17px !important; } /* Contact + quote forms */ .pg-form-row, .pg-qform-fields .pg-form-row-3 { grid-template-columns: 1fr; } .pg-contact-form .btn, .pg-qform-fields .wpcf7-submit { width: 100%; } /* Stats band → 2x2 */ .pg-stats-band { grid-template-columns: 1fr 1fr; } .pg-stat { border-bottom: 1px solid var(--line); } .pg-stat:nth-child(odd) { border-right: 1px solid var(--line); } .pg-stat:nth-child(even) { border-right: none; } .pg-stat .num { font-size: 34px; } /* Timeline */ .pg-tl-row { grid-template-columns: 70px 1fr; gap: 18px; } .pg-tl-year { font-size: 18px; } .pg-tl-body { font-size: 15px; } /* Team → 2 col */ .pg-team { grid-template-columns: 1fr 1fr; gap: 16px; } /* CTA band → column */ .pg-cta-inner { flex-direction: column; align-items: stretch; gap: 20px; padding: 36px 0; } .pg-cta h2 { font-size: 24px; } .pg-cta-actions .btn { width: 100%; } /* FAQ question font */ .pg-faq-q { font-size: 16px; padding-right: 32px; } /* Map */ .pg-map { aspect-ratio: 4 / 3; } } @media (max-width: 520px) { .pg-wrap { padding-left: 16px; padding-right: 16px; } .pg-hero h1 { font-size: 28px; } .pg-team { grid-template-columns: 1fr 1fr; } .pg-stat .num { font-size: 30px; } .pg-gallery { grid-template-columns: 1fr; } .pg-svc-row .pg-svc-name { font-size: 18px; } } @media (max-width: 380px) { .pg-wrap { padding-left: 14px; padding-right: 14px; } .pg-hero h1 { font-size: 26px; } }