/* ============================================================================ KREYA v3 — "Measured" Black ground, monochrome Kreya blue, one typeface. Reference: dala.craftedbygc.com (structure + type system) ========================================================================= */ :root{ /* ground */ --black: #000000; --white: #FFFFFF; --off: #0A0A0A; /* panel fill, one step off the ground */ /* brand — nothing outside the Kreya palette */ --brand: #2F60AE; /* logo dark face — the full-bleed field */ --bright: #2D94D2; /* logo light face — interactive */ --tint: #A9CDE8; /* brand tint — kickers, hairlines, captions */ --deep: #16233C; /* deep navy — wireframe grounds */ /* text on black */ --t1: rgba(255,255,255,1); --t2: rgba(255,255,255,.70); --t3: rgba(255,255,255,.52); /* .44 measured 4.2:1 — under AA for the 11px mono labels */ /* hairlines */ --line: rgba(169,205,232,.16); --line2: rgba(169,205,232,.28); /* Two widths of one family. Inter Tight is condensed — it earns its keep at display sizes where tight tracking is the point, and hurts at 15–22px where it just reads narrow. Inter carries all running copy. */ --display: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --pad: clamp(20px, 5vw, 64px); --gut: clamp(48px, 9vh, 128px); --ease: cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 } /* The ground lives on , not , so it paints before the negative z-index background canvas. With it on the paint order is ambiguous and the block field can end up buried. */ html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; background:#000000; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } } body{ background:transparent; color:var(--t1); font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg{ display:block; max-width:100% } a{ color:inherit; text-decoration:none } button,input,textarea{ font:inherit; color:inherit } ::selection{ background:var(--bright); color:#000 } /* ------------------------------------------------- background block field --- */ /* Longhands, not the `inset` shorthand, and repeated inline on the element itself — see the comment in index.html. A background canvas must never be able to enter normal flow. */ #bg{ position:fixed; top:0; left:0; z-index:-1; width:100%; height:100%; pointer-events:none; /* never intercepts a click or a scroll */ display:block; } /* The two brand fields are opaque, so they mask the block field on their own. Sections that sit on the ground stay transparent and let it through. */ .skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--bright); color:#000; padding:12px 18px; font-weight:600; } .skip:focus{ left:12px; top:12px } :focus-visible{ outline:2px solid var(--bright); outline-offset:3px } /* ---------------------------------------------------------------- layout */ .wrap{ width:100%; max-width:1360px; margin-inline:auto; padding-inline:var(--pad) } .tight{ max-width:1180px } section{ padding-block:var(--gut) } /* ------------------------------------------------------------ typography */ /* Display face — only above ~24px, where condensed reads as confident rather than cramped. */ .d1,h2,.d2,.d3,h3,.wordmark,.pre-line,.disc-name,.mark{ font-family:var(--display) } .d1{ font-size:clamp(42px, 9.2vw, 132px); font-weight:600; letter-spacing:-.045em; line-height:.98; } h2,.d2{ font-size:clamp(32px, 5.2vw, 66px); font-weight:600; letter-spacing:-.038em; line-height:1.04; } .d3{ font-size:clamp(24px, 3.4vw, 44px); font-weight:500; letter-spacing:-.03em; line-height:1.12; } h3{ font-size:clamp(21px,2.4vw,30px); font-weight:500; letter-spacing:-.025em; line-height:1.2 } /* h4 is 19px — body face, it is a subheading not a display line */ h4{ font-family:var(--sans); font-size:18px; font-weight:500; letter-spacing:-.005em } /* the light body voice — Dala's signature, but in the wider face. Inter at 200 is thinner than Inter Tight was at the same weight, so this runs at 300. */ .lead{ font-family:var(--sans); font-size:clamp(17px, 1.45vw, 21px); font-weight:300; line-height:1.6; color:var(--t2); letter-spacing:0; } p{ color:var(--t2) } /* mono kicker */ .kick{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--tint); } .kick::before{ content:''; width:6px; height:6px; background:var(--bright); flex:none; } .kick.plain::before{ display:none } .mono{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); } /* --------------------------------------------------------------- buttons */ /* Both states pass AA: white on #2F60AE = 6.2:1, black on #2D94D2 = 6.3:1 */ .btn{ position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border:0; border-radius:999px; background:var(--brand); color:var(--white); font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:color .38s var(--ease); } .btn::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--bright); transform:translateY(101%); transition:transform .42s var(--ease); } .btn:hover::before,.btn:focus-visible::before{ transform:translateY(0) } .btn:hover,.btn:focus-visible{ color:#000 } .btn svg{ width:16px; height:16px; flex:none } .btn[disabled]{ opacity:.4; cursor:not-allowed } .btn[disabled]:hover::before{ transform:translateY(101%) } .btn[disabled]:hover{ color:var(--white) } /* inverted, for use on the blue fields */ .btn.inv{ background:var(--white); color:var(--brand) } .btn.inv::before{ background:var(--tint) } .btn.inv:hover,.btn.inv:focus-visible{ color:var(--deep) } .btn-text{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--tint); padding-block:6px; border-bottom:1px solid var(--line2); transition:color .3s var(--ease), border-color .3s var(--ease); } .btn-text:hover{ color:var(--bright); border-color:var(--bright) } /* chips (Mammut) */ .chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border:1px solid var(--line2); border-radius:999px; font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--tint); } /* ------------------------------------------------------------- preloader */ .pre{ position:fixed; inset:0; z-index:150; background:var(--black); display:grid; place-items:center; transition:opacity .5s var(--ease), visibility .5s; } .pre.done{ opacity:0; visibility:hidden } .pre-in{ text-align:center; padding-inline:24px } .pre-mark{ width:74px; height:74px; margin:0 auto 40px } .pre-mark rect{ fill:var(--white); animation:blip 1.15s var(--ease) infinite } .pre-mark rect:nth-child(2){ animation-delay:.14s } .pre-mark rect:nth-child(3){ animation-delay:.28s } .pre-mark rect:nth-child(4){ animation-delay:.42s } @keyframes blip{ 0%,100%{opacity:.18} 45%{opacity:1} } .pre-line{ font-size:clamp(20px,3.4vw,42px); font-weight:400; letter-spacing:-.03em; line-height:1.22; color:var(--white); } .pre-status{ position:fixed; left:var(--pad); bottom:34px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--white); } .pre-bar{ position:fixed; left:0; bottom:0; height:2px; width:0; background:var(--bright); transition:width .2s linear; } .no-js .pre{ display:none } /* ---------------------------------------------------------------- header */ .hdr{ position:fixed; inset:0 0 auto 0; z-index:100; padding:18px var(--pad); display:flex; align-items:center; justify-content:space-between; gap:16px; transition:transform .4s var(--ease), background .4s var(--ease); } .hdr.hide{ transform:translateY(-110%) } .hdr.solid{ background:rgba(0,0,0,.72); backdrop-filter:blur(14px) } .mark{ display:inline-flex; align-items:center; gap:11px; font-weight:600; letter-spacing:-.02em; font-size:19px } .mark svg{ width:26px; height:26px; flex:none } /* floating centre pill (Neue Montreal / Mammut) */ .nav{ display:flex; gap:4px; padding:5px; border:1px solid var(--line); border-radius:999px; background:rgba(10,10,10,.6); backdrop-filter:blur(10px); } .nav a{ padding:9px 17px; border-radius:999px; font-size:13.5px; font-weight:400; color:var(--t2); transition:color .28s var(--ease), background .28s var(--ease); } .nav a:hover{ color:var(--white) } .nav a.on{ color:#000; background:var(--bright) } .hdr-r{ display:flex; align-items:center; gap:12px } .burger{ width:44px; height:44px; display:none; place-items:center; border:1px solid var(--line2); border-radius:999px; background:none; cursor:pointer; } .burger i{ display:block; width:16px; height:1.5px; background:var(--white); margin:3px auto; transition:transform .3s var(--ease), opacity .3s } .burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(4.5px) rotate(45deg) } .burger[aria-expanded="true"] i:nth-child(2){ opacity:0 } .burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-4.5px) rotate(-45deg) } /* full-screen mono index menu (Franceclat) */ .menu{ position:fixed; inset:0; z-index:99; background:var(--black); padding:110px var(--pad) 48px; display:grid; grid-template-columns:repeat(3,1fr); gap:34px; align-content:start; opacity:0; visibility:hidden; transition:opacity .38s var(--ease), visibility .38s; } .menu.open{ opacity:1; visibility:visible } .menu a{ display:block; padding:13px 0; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--t2); transition:color .26s var(--ease), padding-left .26s var(--ease); } .menu a:hover{ color:var(--bright); padding-left:10px } .menu-foot{ grid-column:1/-1; margin-top:26px; display:flex; flex-wrap:wrap; gap:14px } /* ------------------------------------------------------------------ hero */ .hero{ padding-top:clamp(150px,20vh,230px); padding-bottom:clamp(60px,10vh,120px) } .hero .d1{ margin:26px 0 0; max-width:16ch } .hero .lead{ margin-top:30px; max-width:52ch } .hero-cta{ margin-top:44px; display:flex; flex-wrap:wrap; align-items:center; gap:18px } .hero-foot{ margin-top:clamp(56px,9vh,110px); padding-top:26px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; } /* --------------------------------------------------------- the narrative */ /* overflow:hidden contains the oversized watermark, which otherwise pushes the document ~20px wider than the viewport */ .narr{ position:relative; overflow:hidden } .narr-mark{ position:absolute; right:-6%; top:-6%; width:min(52vw,620px); opacity:.05; pointer-events:none; z-index:0; } .narr-in{ position:relative; z-index:1; max-width:920px } .narr p{ font-size:clamp(20px,2.2vw,30px); font-weight:300; line-height:1.42; letter-spacing:-.018em; color:var(--t2); margin-top:30px; } .narr p b{ color:var(--white); font-weight:400 } .narr p em{ font-style:normal; color:var(--bright); font-weight:400 } .narr-turn{ margin-top:clamp(44px,7vh,88px); padding-top:34px; border-top:1px solid var(--line2) } /* ------------------------------------------ full-bleed brand field #1 ---- */ .field{ background:var(--brand); color:var(--white); padding-block:clamp(52px,8vh,96px); overflow:hidden } .field p{ color:rgba(255,255,255,.82) } .field .kick{ color:rgba(255,255,255,.86) } .field .kick::before{ background:var(--white) } .field .mono{ color:rgba(255,255,255,.66) } .wordmark{ font-size:clamp(72px,21.5vw,340px); font-weight:700; letter-spacing:-.05em; line-height:.82; text-align:center; color:var(--white); margin-block:clamp(18px,3vh,40px); white-space:nowrap; } .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding-top:34px; border-top:1px solid rgba(255,255,255,.24); } .stats .kick{ display:flex } .stats b{ display:block; margin-top:12px; font-size:clamp(30px,3.4vw,46px); font-weight:600; letter-spacing:-.035em; line-height:1; } .stats span.sub{ display:block; margin-top:9px; font-size:14px; font-weight:300; color:rgba(255,255,255,.72) } /* --------------------------------------------------------- section heads */ .sec-head{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:end; margin-bottom:clamp(40px,6vh,72px) } .sec-head h2{ max-width:14ch } .sec-head .lead{ max-width:46ch } .sec-head.solo{ grid-template-columns:1fr } .sec-kick{ margin-bottom:22px } /* ------------------------------------------------ capabilities explorer */ .explorer{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,80px); align-items:center } .explorer-viz{ position:relative } /* Separating the stack from the block field behind it. This was a radial scrim first. That was wrong: the background is a *regular* grid, so darkening an ellipse over it punches a visible hole in the pattern — the eye tracks the repetition and reads the interruption as a blob. A soft gradient only disappears over irregular noise, which is what the earlier point-cloud background was. Stacked drop-shadows instead. They follow the artwork's own silhouette, so the darkening hugs the plates and there is no arbitrary shape anywhere. */ .explorer-viz svg, .explorer-viz figcaption{ position:relative; z-index:1 } .explorer-viz svg{ width:100%; height:auto; filter:drop-shadow(0 0 3px rgba(0,0,0,1)) drop-shadow(0 0 11px rgba(0,0,0,.95)) drop-shadow(0 6px 30px rgba(0,0,0,.85)); } .pl{ transition:transform .5s var(--ease), opacity .5s var(--ease); transform-origin:center } .pl.dim{ opacity:.34 } .pl.out{ transform:translateX(26px) translateY(-10px) } .disc{ display:block; width:100%; text-align:left; background:none; border:0; border-top:1px solid var(--line); padding:22px 0; cursor:pointer; } .disc:last-child{ border-bottom:1px solid var(--line) } .disc-top{ display:flex; align-items:baseline; gap:16px } .disc-top .mono{ flex:none; width:22px } .disc-name{ flex:1; font-size:clamp(19px,2.1vw,27px); font-weight:400; letter-spacing:-.025em; color:var(--t2); transition:color .3s var(--ease); } .disc[aria-expanded="true"] .disc-name{ color:var(--white) } .disc[aria-expanded="true"] .mono{ color:var(--bright) } .chev{ flex:none; width:9px; height:9px; border-right:1.5px solid var(--t3); border-bottom:1.5px solid var(--t3); transform:rotate(45deg); transition:transform .3s var(--ease), border-color .3s } .disc[aria-expanded="true"] .chev{ transform:rotate(-135deg); border-color:var(--bright) } .disc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s var(--ease) } .disc[aria-expanded="true"] .disc-body{ grid-template-rows:1fr } .disc-body>span{ overflow:hidden } .disc-body p{ padding-top:14px; max-width:50ch; font-weight:300; font-size:17px } .no-js .disc-body{ grid-template-rows:1fr } /* -------------------------------------------------------------- services */ .svcs{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line) } /* opaque cells — they sit on the block field and need to read as surfaces */ .svc{ background:#050607; padding:clamp(28px,3.4vw,46px); transition:background .4s var(--ease) } .svc:hover{ background:var(--off) } .svc h3{ margin:0 0 14px; max-width:18ch } .svc p{ font-weight:300; max-width:44ch } /* ------------------------------------------------- work — module frames */ .proj{ display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(28px,5vw,72px); align-items:center; padding-block:clamp(40px,6vh,80px); border-top:1px solid var(--line) } .proj.flip .proj-txt{ order:2 } .proj-idx{ font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:var(--bright); } .proj h3{ margin:16px 0 16px; max-width:20ch; font-size:clamp(23px,2.9vw,36px) } .proj-client{ display:block; margin-top:10px } .proj-body{ font-weight:300; max-width:48ch; font-size:17px } .metrics{ margin-top:30px; display:grid; grid-template-columns:repeat(2,1fr); gap:20px 24px } .metrics .mono{ display:block } .metrics b{ display:block; margin-top:7px; font-size:15px; font-weight:400; color:var(--white) } .metrics s{ color:var(--t3); text-decoration-color:var(--t3) } .metrics .live{ color:var(--bright) } /* Builders Table: filename chip + corner registration ticks */ .module{ position:relative } .module-tag{ display:inline-flex; align-items:center; gap:8px; margin-bottom:10px; padding:5px 11px; background:var(--bright); color:#000; font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; } .frame{ position:relative; padding:12px; border:1px solid var(--line) } .frame::before,.frame::after, .frame>.tick::before,.frame>.tick::after{ content:''; position:absolute; width:9px; height:9px; border:1px solid var(--bright); } .frame::before{ top:-1px; left:-1px; border-right:0; border-bottom:0 } .frame::after{ top:-1px; right:-1px; border-left:0; border-bottom:0 } .frame>.tick::before{ bottom:-1px; left:-1px; border-right:0; border-top:0 } .frame>.tick::after{ bottom:-1px; right:-1px; border-left:0; border-top:0 } .frame svg{ width:100%; height:auto; display:block } .hud{ margin-top:10px; display:flex; flex-wrap:wrap; gap:8px 20px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); } .hud i{ font-style:normal; color:var(--tint) } .pending{ aspect-ratio:16/10; display:grid; place-items:center; text-align:center; background: repeating-linear-gradient(45deg, rgba(169,205,232,.05) 0 6px, transparent 6px 12px); } .pending p{ font-size:14px; font-weight:300; max-width:32ch; margin:10px auto 0 } /* ------------------------------------------------------------------ why */ .why-row{ display:grid; grid-template-columns:64px 1fr; gap:clamp(16px,3vw,44px); padding:26px 0; border-top:1px solid var(--line) } .why-row:last-child{ border-bottom:1px solid var(--line) } .why-row .n{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; color:var(--bright); padding-top:5px; } .why-row h4{ margin-bottom:8px } .why-row p{ font-weight:300; max-width:56ch } @media (min-width:860px){ .why-row{ grid-template-columns:64px .8fr 1.2fr; align-items:start } .why-row h4{ margin:0 } } /* ---------------------------------------------------------------- about */ .about{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px) } .about h2{ max-width:12ch } .about .lead+.lead{ margin-top:22px } .ledger{ list-style:none; margin-top:38px } .ledger li{ display:flex; gap:20px; padding:16px 0; border-top:1px solid var(--line) } .ledger li:last-child{ border-bottom:1px solid var(--line) } .ledger em{ font-style:normal; flex:none } .ledger span{ font-weight:300; color:var(--t2) } /* -------------------------------------- full-bleed brand field #2 (vision) */ .vision{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,80px) } .vision h2{ margin:22px 0 30px; max-width:17ch } .vision blockquote{ font-size:clamp(17px,1.6vw,21px); font-weight:300; line-height:1.5; color:rgba(255,255,255,.9); padding-left:22px; border-left:2px solid rgba(255,255,255,.4); max-width:44ch; } .missions{ display:grid; gap:1px; background:rgba(255,255,255,.24); align-self:start } .missions>div{ background:var(--brand); padding:24px 0 24px 26px } .missions h4{ margin:12px 0 8px } .missions p{ font-size:15px; font-weight:300; max-width:36ch } /* -------------------------------------------------------------- contact */ .contact{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(30px,5vw,80px) } .contact h2{ max-width:13ch } .info{ list-style:none; margin-top:40px } .info li{ padding:18px 0; border-top:1px solid var(--line) } .info li:last-child{ border-bottom:1px solid var(--line) } .info a{ display:block; margin-top:7px; font-size:18px; font-weight:300; transition:color .28s var(--ease) } .info a:hover{ color:var(--bright) } .info .addr{ display:block; margin-top:7px; font-size:16px; font-weight:300; color:var(--t2) } /* The form is the one place on the page where legibility beats atmosphere — people have to read labels and see what they are typing. It gets an opaque panel. A rectangle is a real shape, so it does not blob against the block field the way a soft scrim would. */ .form{ background:#050607; border:1px solid var(--line); padding:clamp(24px,3vw,40px); } .picks{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:30px } .pick{ padding:9px 17px; border:1px solid var(--line2); border-radius:999px; background:none; font-size:13px; color:var(--t2); cursor:pointer; transition:all .28s var(--ease); } .pick:hover{ border-color:var(--tint); color:var(--white) } .pick[aria-pressed="true"]{ background:var(--bright); border-color:var(--bright); color:#000; font-weight:500 } .field-row{ margin-bottom:24px } .field-row label{ display:block; margin-bottom:9px } .field-row input,.field-row textarea{ width:100%; background:none; border:0; border-bottom:1px solid var(--line2); padding:11px 0; font-size:17px; font-weight:300; color:var(--white); transition:border-color .28s var(--ease); resize:vertical; } .field-row input:focus,.field-row textarea:focus{ outline:0; border-color:var(--bright) } .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden } .note{ margin-top:16px; font-size:14px; font-weight:300; min-height:21px } .note.err{ color:#F5A3A3 } .note.ok{ color:var(--tint) } /* closing restatement — Dala ends on its own hero line */ .closer{ text-align:center; padding-block:clamp(60px,10vh,130px); border-top:1px solid var(--line) } .closer .d3{ max-width:22ch; margin:0 auto 34px } /* --------------------------------------------------------------- footer */ .foot{ border-top:1px solid var(--line); padding-block:clamp(40px,6vh,64px) } .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(24px,4vw,60px) } .foot address{ font-style:normal; margin-top:18px; font-size:15px; font-weight:300; color:var(--t2); line-height:1.7 } .foot h5{ margin-bottom:16px; font-weight:500 } .foot ul{ list-style:none; display:grid; gap:10px } .foot ul a{ font-size:15px; font-weight:300; color:var(--t2); transition:color .28s var(--ease) } .foot ul a:hover{ color:var(--bright) } .foot-end{ margin-top:clamp(36px,5vh,60px); padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; } .foot-end span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--t3) } /* --------------------------------------------------------------- reveals */ .js [data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .72s var(--ease), transform .72s var(--ease); transition-delay:var(--d,0ms) } .js [data-reveal].in{ opacity:1; transform:none } /* ------------------------------------------------------------ responsive */ @media (max-width:1080px){ .nav{ display:none } .burger{ display:grid } } @media (max-width:900px){ .sec-head,.explorer,.about,.vision,.contact,.foot-grid,.proj{ grid-template-columns:1fr } .proj.flip .proj-txt{ order:0 } .svcs{ grid-template-columns:1fr } .stats{ grid-template-columns:repeat(2,1fr) } .menu{ grid-template-columns:1fr } .explorer-viz{ max-width:340px } .hero .d1{ max-width:none } } @media (max-width:560px){ .stats{ grid-template-columns:1fr } .metrics{ grid-template-columns:1fr } .hdr-r .btn{ display:none } .foot-end{ flex-direction:column } } /* --------------------------------------------------------- reduced motion */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .js [data-reveal]{ opacity:1; transform:none } .pre{ display:none } }