/* ========================================================================== NEU — White Skeuomorphism (Neumorphism) design system A soft-UI kit: everything is extruded from or pressed into one surface. ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root{ /* surface + shadow trio (the whole language lives here) */ --bg: #e8ecf3; --surface: #e8ecf3; --sh-light: #ffffff; --sh-dark: #c2c9d6; --sh-light-soft: rgba(255,255,255,.85); /* ink */ --text: #35415c; --text-2: #5a6784; --muted: #97a1b6; --line: rgba(53,65,92,.08); /* accents */ --accent: #f4685e; --accent-2: #ff8a7a; --accent-ink: #ffffff; --green: #2fc39b; --blue: #2b7fff; --amber: #ffb648; /* geometry */ --r-sm: 12px; --r: 18px; --r-lg: 26px; --r-xl: 38px; /* elevation */ --d1: 4px; --b1: 8px; --d2: 7px; --b2: 16px; --d3: 12px; --b3: 28px; --ease: cubic-bezier(.25,.9,.35,1); --dur: .28s; color-scheme: light; } /* accent themes, set on */ body[data-accent="blue"]{ --accent:#2b7fff; --accent-2:#5ea0ff; } body[data-accent="ink"] { --accent:#3c4a68; --accent-2:#54658a; } body[data-accent="green"]{ --accent:#2fc39b; --accent-2:#65d9ba; } /* ---------- 2. Dark mode ---------- */ [data-theme="dark"]{ --bg: #292d36; --surface: #292d36; --sh-light: #33394557; --sh-dark: #1d2027; --sh-light-soft: #333945; --text: #e6ebf5; --text-2: #b3bccf; --muted: #7c8598; --line: rgba(255,255,255,.07); color-scheme: dark; } [data-theme="dark"] .neu, [data-theme="dark"] .neu-sm, [data-theme="dark"] .neu-lg{ background:linear-gradient(145deg,#2d323c,#25292f); } [data-theme="dark"] .lcd{ background:#23262d; } /* ---------- 3. Base ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--text); font:400 15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",sans-serif; letter-spacing:-.01em; -webkit-font-smoothing:antialiased; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); overflow-x:hidden; } h1,h2,h3,h4,p{ margin:0; } button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; } input,select{ font:inherit; color:inherit; } a{ color:inherit; text-decoration:none; } svg{ display:block; } ::selection{ background:var(--accent); color:#fff; } /* ---------- 4. The three shadow primitives ---------- */ /* raised */ .neu{ background:var(--surface); border-radius:var(--r); box-shadow: var(--d2) var(--d2) var(--b2) var(--sh-dark), calc(var(--d2) * -1) calc(var(--d2) * -1) var(--b2) var(--sh-light); transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .neu-sm{ background:var(--surface); border-radius:var(--r-sm); box-shadow: var(--d1) var(--d1) var(--b1) var(--sh-dark), calc(var(--d1) * -1) calc(var(--d1) * -1) var(--b1) var(--sh-light); transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .neu-lg{ background:var(--surface); border-radius:var(--r-xl); box-shadow: var(--d3) var(--d3) var(--b3) var(--sh-dark), calc(var(--d3) * -1) calc(var(--d3) * -1) var(--b3) var(--sh-light); transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } /* pressed / carved into the surface */ .neu-in{ background:var(--surface); border-radius:var(--r); box-shadow: inset var(--d1) var(--d1) var(--b1) var(--sh-dark), inset calc(var(--d1) * -1) calc(var(--d1) * -1) var(--b1) var(--sh-light); transition:box-shadow var(--dur) var(--ease); } .neu-in-deep{ background:var(--surface); border-radius:var(--r); box-shadow: inset var(--d2) var(--d2) var(--b2) var(--sh-dark), inset calc(var(--d2) * -1) calc(var(--d2) * -1) var(--b2) var(--sh-light); } /* barely-there: a lip, not a block */ .neu-flat{ background:var(--surface); border-radius:var(--r); box-shadow:2px 2px 5px var(--sh-dark), -2px -2px 5px var(--sh-light); } /* anything .pressable inverts on touch — the core affordance */ .pressable{ cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; } .pressable:active, .pressable.is-on{ box-shadow: inset var(--d1) var(--d1) var(--b1) var(--sh-dark), inset calc(var(--d1) * -1) calc(var(--d1) * -1) var(--b1) var(--sh-light); } .pressable:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } /* ---------- 5. Layout helpers ---------- */ .row{ display:flex; align-items:center; } .col{ display:flex; flex-direction:column; } .between{ justify-content:space-between; } .center{ align-items:center; justify-content:center; } .wrap{ flex-wrap:wrap; } .grow{ flex:1; min-width:0; } .g4{gap:4px}.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px} .g14{gap:14px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px}.g32{gap:32px} .mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px} .mt20{margin-top:20px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt40{margin-top:40px} .mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px} .p12{padding:12px}.p16{padding:16px}.p20{padding:20px}.p24{padding:24px} .full{width:100%} .hr{ height:1px; background:var(--line); border:0; margin:16px 0; } /* ---------- 6. Type ---------- */ .display{ font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1.1; } .h1{ font-size:26px; font-weight:800; letter-spacing:-.025em; } .h2{ font-size:20px; font-weight:700; letter-spacing:-.02em; } .h3{ font-size:16px; font-weight:700; letter-spacing:-.01em; } .body{ font-size:14px; color:var(--text-2); } .caption{ font-size:12px; color:var(--muted); } .tiny{ font-size:10.5px; color:var(--muted); letter-spacing:.04em; } .muted{ color:var(--muted); } .accent{ color:var(--accent); } .strong{ font-weight:700; } .upper{ text-transform:uppercase; letter-spacing:.09em; } .tnum{ font-variant-numeric:tabular-nums; } .mono{ font-family:ui-monospace,"SF Mono",Menlo,monospace; } /* ---------- 7. Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 22px; border-radius:14px; font-size:14px; font-weight:700; background:var(--surface); box-shadow:5px 5px 12px var(--sh-dark), -5px -5px 12px var(--sh-light); transition:box-shadow var(--dur) var(--ease), transform .12s var(--ease), color var(--dur); cursor:pointer; -webkit-tap-highlight-color:transparent; } .btn:active{ box-shadow:inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light); } .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } .btn-block{ width:100%; } .btn-lg{ min-height:56px; border-radius:18px; font-size:15px; } .btn-danger{ color:var(--accent); } /* filled accent — the one place we break the monochrome */ .btn-accent{ background:var(--accent); color:var(--accent-ink); box-shadow:0 5px 12px -3px rgba(0,0,0,.28); } .btn-accent:active{ box-shadow:inset 0 2px 6px rgba(0,0,0,.3); } /* icon + circular */ .icon-btn{ display:inline-grid; place-items:center; width:46px; height:46px; flex:0 0 auto; border-radius:14px; color:var(--text-2); background:var(--surface); box-shadow:5px 5px 11px var(--sh-dark), -5px -5px 11px var(--sh-light); transition:box-shadow var(--dur) var(--ease), color var(--dur), transform .12s; cursor:pointer; -webkit-tap-highlight-color:transparent; } .icon-btn:active,.icon-btn.is-on{ box-shadow:inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light); } .icon-btn.is-on{ color:var(--accent); } .icon-btn.sm{ width:38px; height:38px; border-radius:11px; } .icon-btn.lg{ width:58px; height:58px; border-radius:18px; } .icon-btn.round{ border-radius:50%; } .icon-btn svg{ width:19px; height:19px; } .icon-btn.sm svg{ width:16px; height:16px; } .icon-btn.lg svg{ width:24px; height:24px; } .badge{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; display:grid; place-items:center; border-radius:9px; font-size:10px; font-weight:700; background:var(--surface); color:var(--accent); box-shadow:2px 2px 5px var(--sh-dark), -2px -2px 5px var(--sh-light); } .rel{ position:relative; } .chip{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:12px; font-size:12.5px; font-weight:600; color:var(--text-2); background:var(--surface); box-shadow:3px 3px 8px var(--sh-dark), -3px -3px 8px var(--sh-light); } .chip.is-on{ color:var(--accent); box-shadow:inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light); } /* ---------- 8. Toggle switch ---------- */ .switch{ position:relative; display:inline-block; width:62px; height:32px; flex:0 0 auto; cursor:pointer; } .switch input{ position:absolute; opacity:0; width:0; height:0; } .switch .track{ position:absolute; inset:0; border-radius:16px; background:var(--surface); box-shadow:inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light); transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .switch .knob{ position:absolute; top:4px; left:4px; width:24px; height:24px; border-radius:50%; background:var(--surface); box-shadow:3px 3px 7px var(--sh-dark), -2px -2px 6px var(--sh-light); transition:transform var(--dur) var(--ease), background var(--dur) var(--ease); } .switch input:checked ~ .track{ background:var(--accent); box-shadow:inset 0 1px 2px rgba(0,0,0,.24); } .switch input:checked ~ .knob{ transform:translateX(30px); background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.3); } .switch input:focus-visible ~ .track{ outline:2px solid var(--accent); outline-offset:3px; } .switch.ink input:checked ~ .track{ background:#39445e; } /* ---------- 9. Checkbox / radio ---------- */ .check{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; } .check input{ position:absolute; opacity:0; } .check .box{ width:26px; height:26px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center; color:transparent; background:var(--surface); box-shadow:inset 3px 3px 6px var(--sh-dark), inset -3px -3px 6px var(--sh-light); transition:color var(--dur), box-shadow var(--dur); } .check .box svg{ width:15px; height:15px; } .check input:checked ~ .box{ color:var(--accent); box-shadow:3px 3px 8px var(--sh-dark), -3px -3px 8px var(--sh-light); } .check.radio .box{ border-radius:50%; } .check.radio .box::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--accent); transform:scale(0); transition:transform var(--dur) var(--ease); } .check.radio .box svg{ display:none; } .check.radio input:checked ~ .box::after{ transform:scale(1); } /* ---------- 10. Range slider ---------- */ /* The fill is a real rounded element sitting inside the well — like the ring's round-capped stroke — instead of a background painted under the well's inset shadow, which left a square end and a haze over the colour. JS wraps every input.slider in .slider-wrap and drives --pn (0..1). */ .slider-wrap{ position:relative; display:block; width:100%; height:26px; } .slider-wrap .well{ position:absolute; left:0; right:0; top:5px; height:16px; border-radius:8px; background:var(--surface); box-shadow:inset 2px 2px 4px var(--sh-dark), inset -1px -1px 2px var(--sh-light); } .slider-wrap .slider-fill{ position:absolute; left:3px; top:8px; height:10px; border-radius:5px; background:var(--accent); width:calc(10px + (100% - 26px) * var(--pn, 0)); } .slider-wrap.thin{ height:20px; } .slider-wrap.thin .well{ top:5px; height:10px; border-radius:5px; } .slider-wrap.thin .slider-fill{ left:2px; top:7px; height:6px; border-radius:3px; width:calc(8px + (100% - 20px) * var(--pn, 0)); } .slider{ -webkit-appearance:none; appearance:none; position:relative; z-index:2; display:block; width:100%; height:26px; margin:0; background:transparent; cursor:pointer; } .slider::-webkit-slider-runnable-track{ height:26px; border:0; background:transparent; } .slider::-moz-range-track{ height:26px; border:0; background:transparent; } .slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%; margin-top:0; background:var(--surface); box-shadow:2px 2px 5px var(--sh-dark), -2px -2px 4px var(--sh-light), 0 1px 3px rgba(0,0,0,.14); transition:transform .12s var(--ease); } .slider::-moz-range-thumb{ width:26px; height:26px; border:0; border-radius:50%; background:var(--surface); box-shadow:2px 2px 5px var(--sh-dark), -2px -2px 4px var(--sh-light), 0 1px 3px rgba(0,0,0,.14); } .slider:active::-webkit-slider-thumb{ transform:scale(1.1); } .slider:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--accent); outline-offset:2px; } .slider.thin{ height:20px; } .slider.thin::-webkit-slider-runnable-track{ height:20px; } .slider.thin::-moz-range-track{ height:20px; } .slider.thin::-webkit-slider-thumb{ width:20px; height:20px; } .slider.thin::-moz-range-thumb{ width:20px; height:20px; } /* vertical slider (smart-home dimmer) */ .vslider{ position:relative; width:96px; height:280px; border-radius:24px; overflow:hidden; background:var(--surface); box-shadow:inset 5px 5px 12px var(--sh-dark), inset -5px -5px 12px var(--sh-light); touch-action:none; cursor:ns-resize; user-select:none; } .vslider .fill{ position:absolute; left:6px; right:6px; bottom:6px; border-radius:20px; background:var(--surface); box-shadow:4px 4px 10px var(--sh-dark), -4px -4px 10px var(--sh-light); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; transition:height .12s var(--ease); } .vslider .ticks{ position:absolute; left:50%; top:20px; bottom:20px; width:34px; transform:translateX(-50%); display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; } .vslider .ticks i{ height:1.5px; background:var(--muted); opacity:.35; border-radius:1px; } .vslider .ticks i:nth-child(odd){ width:60%; } /* ---------- 11. Segmented control ---------- */ .segmented{ position:relative; display:flex; padding:6px; border-radius:16px; background:var(--surface); box-shadow:inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light); } .segmented .thumb{ position:absolute; top:6px; bottom:6px; left:6px; border-radius:12px; background:var(--surface); box-shadow:4px 4px 9px var(--sh-dark), -4px -4px 9px var(--sh-light); transition:transform var(--dur) var(--ease), width var(--dur) var(--ease); } .segmented button{ position:relative; z-index:1; flex:1; min-height:38px; padding:0 14px; font-size:13px; font-weight:600; color:var(--muted); transition:color var(--dur) var(--ease); white-space:nowrap; } .segmented button[aria-selected="true"]{ color:var(--text); } .segmented.accent button[aria-selected="true"]{ color:var(--accent); } /* ---------- 12. Inputs ---------- */ .field{ display:flex; align-items:center; gap:10px; min-height:50px; padding:0 16px; border-radius:15px; background:var(--surface); color:var(--muted); box-shadow:inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light); } .field input,.field select{ flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:14px; color:var(--text); } .field input::placeholder{ color:var(--muted); } .field svg{ width:17px; height:17px; flex:0 0 auto; } /* A date input brings its own chrome. Left alone it renders a bright native calendar button and lays its text out to a different rhythm than every other field in the system, which is exactly how it looks wrong. */ .field input[type="date"]{ appearance:none; -webkit-appearance:none; font-family:inherit; line-height:1.2; /* Safari centres the value in the control's own box rather than the row. */ padding:0; margin:0; height:auto; min-height:0; } .field input[type="date"]::-webkit-datetime-edit{ padding:0; color:var(--text); } .field input[type="date"]::-webkit-datetime-edit-fields-wrapper{ padding:0; } .field input[type="date"]::-webkit-datetime-edit-text{ color:var(--muted); padding:0 2px; } .field input[type="date"]::-webkit-inner-spin-button{ display:none; } /* The picker button becomes the same weight as the field's own icon. */ .field input[type="date"]::-webkit-calendar-picker-indicator{ opacity:.55; cursor:pointer; padding:0; margin:0 0 0 6px; filter:var(--date-picker-filter, none); transition:opacity .15s; } .field input[type="date"]::-webkit-calendar-picker-indicator:hover{ opacity:1; } /* Its glyph is a dark PNG, so on a dark surface it has to be inverted or it is a black square on a dark field. */ :root[data-theme="dark"]{ --date-picker-filter:invert(1) brightness(1.6); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --date-picker-filter:invert(1) brightness(1.6); } } /* An empty date input shows its placeholder text in the value colour, which reads as a filled field. */ .field input[type="date"]:not(:focus):invalid::-webkit-datetime-edit{ color:var(--muted); } /* A textarea keeps its user-agent border and font, so an inset surface alone leaves a hairline box drawn on top of the shadow. */ textarea.neu-in{ width:100%; padding:14px 16px; border:0; outline:0; font:inherit; font-size:14px; color:var(--text); background:var(--surface); resize:vertical; min-height:140px; } textarea.neu-in::placeholder{ color:var(--muted); } textarea.neu-in:focus{ box-shadow: inset var(--d1) var(--d1) var(--b1) var(--sh-dark), inset calc(var(--d1) * -1) calc(var(--d1) * -1) var(--b1) var(--sh-light), 0 0 0 2px color-mix(in srgb,var(--accent) 45%, transparent); } .field:focus-within{ box-shadow:inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light), 0 0 0 2px color-mix(in srgb,var(--accent) 45%, transparent); } /* ---------- 13. Cards / rows ---------- */ .card{ padding:20px; border-radius:var(--r-lg); } .list-row{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; } .avatar{ width:44px; height:44px; border-radius:13px; flex:0 0 auto; object-fit:cover; background:var(--surface); box-shadow:3px 3px 8px var(--sh-dark), -3px -3px 8px var(--sh-light); } .avatar.round{ border-radius:50%; } .avatar.sm{ width:34px; height:34px; border-radius:10px; } .avatar.lg{ width:56px; height:56px; border-radius:17px; } .thumb-icon{ width:38px; height:38px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center; color:var(--accent); background:var(--surface); box-shadow:3px 3px 7px var(--sh-dark), -3px -3px 7px var(--sh-light); } .thumb-icon svg{ width:17px; height:17px; } /* ---------- 14. LCD (digital clock face) ---------- */ .lcd{ border-radius:20px; padding:18px 22px; background:var(--surface); box-shadow:inset 6px 6px 13px var(--sh-dark), inset -6px -6px 13px var(--sh-light); } .lcd-digits{ position:relative; display:inline-block; font-family:"DSEG7","Courier New",ui-monospace,monospace; font-size:56px; font-weight:700; letter-spacing:.04em; line-height:1; font-variant-numeric:tabular-nums; } .lcd-digits .ghost{ position:absolute; inset:0; color:var(--sh-dark); opacity:.42; } .lcd-digits .live{ position:relative; color:var(--text); } /* ---------- 15. Progress ring ---------- */ .ring{ position:relative; display:inline-grid; place-items:center; } .ring svg{ transform:rotate(-90deg); } .ring .track{ stroke:var(--surface); filter:drop-shadow(2px 2px 3px var(--sh-dark)) drop-shadow(-2px -2px 3px var(--sh-light)); } .ring .bar{ stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset .6s var(--ease); } .ring .label{ position:absolute; text-align:center; } /* ---------- 16. Bars chart ---------- */ .bars{ display:flex; align-items:flex-end; gap:10px; height:170px; } .bars .bar{ flex:1; position:relative; border-radius:11px; overflow:hidden; background:var(--surface); box-shadow:inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light); height:100%; } .bars .bar i{ position:absolute; left:3px; right:3px; bottom:3px; border-radius:9px; background:var(--accent); transition:height .7s var(--ease); } .bars-x{ display:flex; gap:10px; margin-top:10px; } .bars-x span{ flex:1; text-align:center; font-size:11px; color:var(--muted); font-weight:600; } /* ---------- 17. Bottom nav ---------- */ .tabbar{ display:flex; gap:10px; justify-content:space-between; padding:10px; border-radius:24px; } .tabbar button{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 4px; border-radius:16px; font-size:10.5px; font-weight:600; color:var(--muted); background:var(--surface); box-shadow:4px 4px 9px var(--sh-dark), -4px -4px 9px var(--sh-light); transition:box-shadow var(--dur) var(--ease), color var(--dur) var(--ease); -webkit-tap-highlight-color:transparent; } .tabbar button svg{ width:19px; height:19px; } .tabbar button[aria-selected="true"]{ color:var(--accent); box-shadow:inset 4px 4px 8px var(--sh-dark), inset -4px -4px 8px var(--sh-light); } /* ---------- 18. Phone frame ---------- */ .stage{ display:flex; flex-wrap:wrap; gap:44px; justify-content:center; padding:44px 24px 80px; } .phone{ width:390px; max-width:100%; flex:0 0 auto; border-radius:46px; padding:16px 12px; background:var(--surface); box-shadow:20px 20px 48px var(--sh-dark), -20px -20px 48px var(--sh-light); } .phone .notch{ display:flex; align-items:center; justify-content:center; gap:10px; height:16px; margin-bottom:8px; } .phone .notch i{ width:46px; height:5px; border-radius:3px; background:var(--surface); box-shadow:inset 2px 2px 4px var(--sh-dark), inset -1px -1px 3px var(--sh-light); } .phone .notch b{ width:9px; height:9px; border-radius:50%; background:var(--surface); box-shadow:inset 2px 2px 3px var(--sh-dark), inset -1px -1px 2px var(--sh-light); } .screen{ height:720px; overflow-y:auto; overscroll-behavior:contain; padding:6px 12px 14px; border-radius:36px; scrollbar-width:none; } .screen::-webkit-scrollbar{ display:none; } .screen-pad{ padding-bottom:14px; } /* sticky bottom nav inside a screen */ .screen .dock{ position:sticky; bottom:0; margin-top:18px; padding-top:10px; background:linear-gradient(180deg,transparent,var(--bg) 34%); } /* ---------- 19. Page chrome (gallery/demo shell) ---------- */ .topbar{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px; padding:14px 20px; background:var(--bg); box-shadow:0 8px 20px -14px var(--sh-dark); } .brand{ display:flex; align-items:center; gap:11px; min-width:0; font-weight:800; letter-spacing:-.02em; white-space:nowrap; } /* clip the label, never the badge — overflow on .brand cuts its shadow */ .brand > span:last-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; } .brand .dot{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--surface); color:var(--accent); box-shadow:4px 4px 9px var(--sh-dark), -4px -4px 9px var(--sh-light); } .wrapper{ max-width:1180px; margin:0 auto; padding:0 20px 90px; } .section{ margin-top:44px; } .section > .h2{ margin-bottom:4px; } .grid{ display:grid; gap:20px; } .grid.c2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .grid.c3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .grid.c4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .demo-links{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); } .demo-link{ display:flex; align-items:center; gap:14px; padding:16px; } /* toast */ .toast{ position:fixed; left:50%; bottom:26px; z-index:120; transform:translate(-50%,140%); padding:13px 22px; border-radius:16px; font-size:13.5px; font-weight:600; background:var(--surface); box-shadow:8px 8px 20px var(--sh-dark), -8px -8px 20px var(--sh-light); transition:transform .38s var(--ease); pointer-events:none; max-width:90vw; } .toast.show{ transform:translate(-50%,0); } /* ---------- 21. Fades instead of hard scroll edges ---------- */ /* Horizontal rails: the mask is driven by --fl/--fr, which JS sets to 0 at whichever end is already reached, so nothing fades that isn't cut off. */ .fade-x{ -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--fl,0px), #000 calc(100% - var(--fr,0px)), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 var(--fl,0px), #000 calc(100% - var(--fr,0px)), transparent 100%); transition:-webkit-mask-image .2s linear, mask-image .2s linear; } /* Vertical scrollers fade the same way. The phone screen only fades at the top: its bottom edge is already handled by the dock's own gradient. */ .fade-y{ -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 var(--ft,0px), #000 calc(100% - var(--fb,0px)), transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 var(--ft,0px), #000 calc(100% - var(--fb,0px)), transparent 100%); transition:-webkit-mask-image .2s linear, mask-image .2s linear; } /* Page-level scrolling fades out under the sticky bar rather than cutting. */ .topbar{ position:sticky; } .topbar::after{ content:""; position:absolute; left:0; right:0; top:100%; height:24px; background:linear-gradient(180deg, var(--bg), transparent); pointer-events:none; } /* ---------- 22. Dropdown ---------- */ .dropdown{ position:relative; } .dropdown > .field{ cursor:pointer; user-select:none; } /* a click shouldn't leave a focus ring behind — only keyboard focus rings */ .dropdown > .field:focus-within{ box-shadow:inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light); } .dropdown > .field:focus-visible{ box-shadow:inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light), 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); } .dropdown .chev{ transition:transform var(--dur) var(--ease); } .dropdown.open .chev{ transform:rotate(180deg); } .dropdown .menu{ position:absolute; z-index:60; left:0; right:0; top:calc(100% + 9px); padding:8px; border-radius:18px; background:var(--surface); box-shadow:8px 8px 22px var(--sh-dark), -8px -8px 22px var(--sh-light); max-height:250px; overflow-y:auto; scrollbar-width:none; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .dropdown .menu::-webkit-scrollbar{ display:none; } .dropdown.open .menu{ opacity:1; transform:none; pointer-events:auto; } .dropdown .menu button{ display:flex; align-items:center; width:100%; min-height:42px; padding:0 14px; border-radius:12px; font-size:13.5px; font-weight:600; color:var(--text-2); text-align:left; } .dropdown .menu button:hover{ color:var(--text); } .dropdown .menu button[aria-selected="true"]{ color:var(--accent); box-shadow:inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light); } .dropdown .menu button:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; } /* ---------- 23. Swipeable rails ---------- */ /* A scroll box clips at its own edge, so a raised child's shadow gets sliced into a hard line. The padding gives the shadow room inside the scroller; the negative inline margin keeps the rail flush with the column around it. */ .rail-room{ padding:16px 12px; margin:-12px -12px; } .swipe{ cursor:grab; } .swipe.dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; } .swipe.dragging *{ pointer-events:none; } .dotrow i{ cursor:pointer; } /* ---------- 20. Responsive ---------- */ @media (max-width:900px){ .grid.c4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .grid.c3{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:680px){ :root{ --d3:9px; --b3:20px; } .stage{ padding:0; gap:0; } .phone{ width:100%; border-radius:0; padding:0; box-shadow:none; background:transparent; } .phone .notch{ display:none; } .screen{ height:auto; min-height:calc(100dvh - 62px); padding:16px 18px 120px; border-radius:0; } /* the dock becomes a real fixed tab bar, clear of the home indicator */ .screen .dock{ position:fixed; left:0; right:0; bottom:0; z-index:30; margin-top:0; padding:14px 16px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,transparent,var(--bg) 42%); } .screen .dock .tabbar{ box-shadow:inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light); } .grid.c2,.grid.c3,.grid.c4{ grid-template-columns:1fr; } .wrapper{ padding:0 16px 70px; } .display{ font-size:28px; } .topbar{ padding:12px 16px; } .brand .muted{ display:none; } /* keep the name, drop the suffix */ } @media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* ---------- 24. Held press ---------- */ /* JS adds .is-pressed on pointer down and removes it on release, so a held button stays down. These sit at the end of the file so they win over the raised shadow of each component at equal specificity. */ .is-pressed{ box-shadow: inset var(--d1) var(--d1) var(--b1) var(--sh-dark), inset calc(var(--d1) * -1) calc(var(--d1) * -1) var(--b1) var(--sh-light); } .btn.is-pressed, .icon-btn.is-pressed{ box-shadow:inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light); } /* filled buttons press by deepening, not by turning grey */ .btn-accent.is-pressed{ box-shadow:inset 0 2px 6px rgba(0,0,0,.3); } .tabbar button.is-pressed{ box-shadow:inset 4px 4px 8px var(--sh-dark), inset -4px -4px 8px var(--sh-light); } .chip.is-pressed, .cat.is-pressed, .catbtn.is-pressed, .menu button.is-pressed{ box-shadow:inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light); } .cat.is-on.is-pressed{ box-shadow:inset 0 2px 7px rgba(0,0,0,.32); } .light-card.is-pressed, .pcard.is-pressed, .flight.is-pressed{ box-shadow:inset 5px 5px 11px var(--sh-dark), inset -5px -5px 11px var(--sh-light); }