@import url("../tokens/fonts.css");
/* ==========================================================================
Origami — folded paper.
Soft papers on a washi page. Panels unfold on hinges, presses leave creases,
toasts arrive as paper planes. Colours, spacing, radii and shadows come
from tokens.css; the motion and the paper physics live here.
Rules: transform/opacity only for movement; entrance animations fill
BACKWARDS; preserve-3d only on the few elements with two faces.
========================================================================== */
:root {
/* easings */
--og-unfold: cubic-bezier(.2, .9, .25, 1.12); /* a sheet springing flat: quick, ~4% overshoot */
--og-crease: cubic-bezier(.35, 0, .25, 1); /* pressing a fold in: firm, no overshoot */
--og-flap: cubic-bezier(.45, 1.5, .45, .95); /* flaps flipping over: lively settle */
--og-glide: cubic-bezier(.22, .68, .28, 1); /* paper planes: long glide, soft landing */
--og-fold: cubic-bezier(.6, 0, .8, .35); /* folding away: accelerates out */
/* durations */
--og-t-press: 110ms;
--og-t-hover: 220ms;
--og-t-flap: 420ms;
--og-t-unfold: 560ms;
--og-t-glide: 820ms;
/* context: text on whatever sheet we're on (the page by default) */
--og-ink: var(--page-ink);
--og-ink-soft: var(--page-ink-soft);
--og-rule: color-mix(in srgb, var(--page-ink) 18%, transparent);
--og-ground: var(--washi);
--og-fibre: url("data:image/svg+xml,");
color-scheme: light;
}
[data-theme="dark"] {
--og-fibre: url("data:image/svg+xml,");
color-scheme: dark;
}
body {
margin: 0;
background-color: var(--washi);
background-image: var(--og-fibre);
background-size: 260px 260px;
color: var(--page-ink);
font-family: var(--font-body);
font-size: 15px;
line-height: 24px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.og-paper :focus-visible, .og-menu :focus-visible, .og-modal__panel :focus-visible { outline-color: var(--indigo); }
.og-tone-indigo :focus-visible { outline-color: var(--on-indigo); }
.og-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
.og-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* ---------- layout helpers (previews and screens) ---------- */
.og-stage { padding: var(--space-5); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.og-stage--top { align-items: flex-start; }
.og-stage--col { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.og-stage--col > * { max-width: 100%; }
.og-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.og-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.og-overline { font: 700 11px/16px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--og-ink-soft); }
.og-muted { color: var(--og-ink-soft); }
.og-enter { animation: og-rise 620ms var(--og-unfold) backwards; animation-delay: calc(var(--d, 0) * 70ms + 60ms); }
/* ==========================================================================
Paper: every sheet has a fold line — a light half and a shaded half
========================================================================== */
.og-paper {
--og-fill: var(--paper); --og-ink: var(--ink); --og-ink-soft: var(--ink-soft); --og-rule: var(--crease); --og-ear: var(--paper-shade);
position: relative; isolation: isolate;
background-color: var(--og-fill); color: var(--og-ink);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-flat);
}
.og-paper > :not(.og-ear) { --og-ground: var(--og-fill); }
.og-paper::before, .og-crease-bg::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
background: linear-gradient(var(--og-angle, 112deg),
var(--og-hi, rgb(255 255 255 / .3)) 0%, rgb(255 255 255 / 0) var(--og-at, 50%),
var(--og-sh, rgb(38 36 56 / .055)) var(--og-at, 50%), rgb(38 36 56 / .02) 100%);
}
.og-fold-vertical { --og-angle: 90deg; }
.og-fold-steep { --og-angle: 150deg; --og-at: 58%; }
.og-fold-none::before { display: none; }
/* tones: coloured papers. Their backs are white, like real kami. */
.og-tone-paper.og-tone-paper { --og-fill: var(--paper); --og-ink: var(--ink); --og-ink-soft: var(--ink-soft); --og-ear: var(--paper-shade); }
.og-tone-shade.og-tone-shade { --og-fill: var(--paper-shade); --og-ink: var(--ink); --og-ink-soft: var(--ink-soft); --og-ear: var(--paper); }
.og-tone-coral.og-tone-coral { --og-fill: var(--coral); --og-ink: var(--ink); --og-ink-soft: var(--ink); --og-ear: var(--paper); --og-sh: rgb(38 36 56 / .08); }
.og-tone-teal.og-tone-teal { --og-fill: var(--teal); --og-ink: var(--ink); --og-ink-soft: var(--ink); --og-ear: var(--paper); --og-sh: rgb(38 36 56 / .08); }
.og-tone-butter.og-tone-butter { --og-fill: var(--butter); --og-ink: var(--ink); --og-ink-soft: var(--ink); --og-ear: var(--paper); --og-sh: rgb(38 36 56 / .07); }
.og-tone-blush.og-tone-blush { --og-fill: var(--blush); --og-ink: var(--ink); --og-ink-soft: var(--ink); --og-ear: var(--paper); --og-sh: rgb(38 36 56 / .07); }
.og-tone-indigo.og-tone-indigo { --og-fill: var(--indigo); --og-ink: var(--on-indigo); --og-ink-soft: var(--on-indigo); --og-ear: var(--paper); --og-rule: rgb(255 255 255 / .2); --og-sh: rgb(0 0 0 / .16); --og-hi: rgb(255 255 255 / .07); }
/* the dog-ear: hover lifts a corner like a flap */
.og-ear {
position: absolute; top: 0; right: 0; z-index: 3; width: 24px; height: 24px; pointer-events: none;
border-top-right-radius: var(--radius-sm);
background:
linear-gradient(to bottom left, var(--og-ground) 50%, transparent 50%),
linear-gradient(to top right, var(--og-ear) 0%, var(--og-ear) 42%, color-mix(in srgb, var(--og-ear) 82%, #262438) 50%, transparent 50%);
transform: scale(0); transform-origin: 100% 0;
transition: transform 300ms var(--og-flap);
}
/* the crease left by a press */
.og-creaseable { -webkit-tap-highlight-color: transparent; }
.og-crease {
position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
background: linear-gradient(90deg,
rgb(38 36 56 / 0) 0%, rgb(38 36 56 / .14) calc(var(--og-px, 50%) - 1px),
rgb(255 255 255 / .75) var(--og-px, 50%), rgb(38 36 56 / .22) calc(var(--og-px, 50%) + 1.5px),
rgb(38 36 56 / 0) 100%);
transition: opacity 260ms ease;
}
.is-pressed > .og-crease { opacity: 1; transition-duration: 50ms; }
/* ==========================================================================
Button
========================================================================== */
.og-btn {
--og-fill: var(--paper); --og-ink: var(--ink); --og-angle: 102deg;
position: relative; isolation: isolate;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 42px; padding: 0 18px; margin: 0; border: 0; border-radius: var(--radius-sm);
background: var(--og-fill); color: var(--og-ink);
font: 600 15px/1 var(--font-display); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
cursor: pointer; user-select: none;
box-shadow: var(--shadow-flat);
transform-origin: 50% 0;
transform: perspective(600px) rotateX(0) translateY(0);
transition: transform var(--og-t-hover) var(--og-unfold), box-shadow var(--og-t-hover) ease;
}
.og-btn::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
background: linear-gradient(var(--og-angle), var(--og-hi, rgb(255 255 255 / .28)) 0%, rgb(255 255 255 / 0) 50%, var(--og-sh, rgb(38 36 56 / .06)) 50%, rgb(38 36 56 / .02) 100%);
}
.og-btn::after { content: ""; position: absolute; inset: -2px -4px -9px -4px; z-index: -2; }
.og-btn:hover { transform: perspective(600px) rotateX(11deg) translateY(-1px); box-shadow: var(--shadow-lift); }
.og-btn.is-pressed {
transform: perspective(600px) rotateY(var(--og-tilt, 0deg)) rotateX(var(--og-tiltx, 0deg)) scale(.97);
box-shadow: var(--shadow-press);
transition-duration: var(--og-t-press); transition-timing-function: var(--og-crease);
}
.og-btn__icon { width: 18px; height: 18px; margin-left: -2px; }
.og-btn__icon--end { margin: 0 -4px 0 0; }
.og-btn--primary { --og-fill: var(--coral); --og-ink: var(--ink); --og-sh: rgb(38 36 56 / .09); }
.og-btn--indigo { --og-fill: var(--indigo); --og-ink: var(--on-indigo); --og-sh: rgb(0 0 0 / .16); --og-hi: rgb(255 255 255 / .1); }
.og-btn--secondary { --og-fill: var(--paper); --og-ink: var(--ink); }
.og-btn--danger { --og-fill: var(--coral-text); --og-ink: var(--paper); --og-sh: rgb(0 0 0 / .12); --og-hi: rgb(255 255 255 / .1); }
.og-btn--ghost { --og-fill: transparent; color: inherit; box-shadow: none; }
.og-btn--ghost::before { display: none; }
.og-btn--ghost:hover { background: color-mix(in srgb, currentColor 9%, transparent); box-shadow: none; transform: none; }
.og-btn--ghost.is-pressed { background: color-mix(in srgb, currentColor 14%, transparent); box-shadow: none; }
.og-btn--sm { height: 34px; padding: 0 13px; font-size: 14px; gap: 6px; }
.og-btn--sm .og-btn__icon { width: 16px; height: 16px; }
.og-btn--lg { height: 52px; padding: 0 24px; font-size: 17px; gap: 10px; }
.og-btn--block { display: flex; width: 100%; }
.og-btn:disabled, .og-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: var(--shadow-press); }
.og-btn.is-loading { cursor: progress; }
.og-btn.is-loading .og-btn__label { opacity: .78; }
.og-btn.is-loading:hover { transform: none; box-shadow: var(--shadow-flat); }
.og-btn__crane { margin-left: -2px; }
/* ==========================================================================
IconButton
========================================================================== */
.og-iconbtn {
--og-fill: var(--paper); --og-ink: var(--ink);
position: relative; isolation: isolate; display: inline-grid; place-items: center; flex: none;
width: 40px; height: 40px; padding: 0; margin: 0; border: 0; border-radius: var(--radius-sm);
background: var(--og-fill); color: var(--og-ink); cursor: pointer;
box-shadow: var(--shadow-flat);
transform-origin: 50% 0;
transform: perspective(400px) rotateX(0);
transition: transform var(--og-t-hover) var(--og-unfold), box-shadow var(--og-t-hover) ease;
}
.og-iconbtn::after { content: ""; position: absolute; inset: -2px -4px -8px -4px; z-index: -2; }
.og-iconbtn:hover { transform: perspective(400px) rotateX(12deg) translateY(-1px); box-shadow: var(--shadow-lift); }
.og-iconbtn.is-pressed { transform: perspective(400px) rotateY(var(--og-tilt, 0deg)) rotateX(var(--og-tiltx, 0deg)) scale(.93); box-shadow: var(--shadow-press); transition-duration: var(--og-t-press); }
.og-iconbtn .og-icon { width: 20px; height: 20px; }
.og-iconbtn--sm { width: 32px; height: 32px; }
.og-iconbtn--sm .og-icon { width: 17px; height: 17px; }
.og-iconbtn--lg { width: 48px; height: 48px; }
.og-iconbtn--coral { --og-fill: var(--coral); }
.og-iconbtn--indigo { --og-fill: var(--indigo); --og-ink: var(--on-indigo); }
.og-iconbtn--ghost { --og-fill: transparent; color: inherit; box-shadow: none; }
.og-iconbtn--ghost:hover { background: color-mix(in srgb, currentColor 9%, transparent); box-shadow: none; transform: none; }
.og-iconbtn--ghost.is-pressed { box-shadow: none; }
.og-iconbtn[aria-pressed="true"] { --og-fill: var(--butter); --og-ink: var(--ink); }
.og-iconbtn__ear {
position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-top-right-radius: var(--radius-sm); pointer-events: none;
background: linear-gradient(to bottom left, var(--og-ground) 50%, transparent 50%), linear-gradient(to top right, var(--paper-shade) 46%, #26243833 50%, transparent 50%);
transform: scale(0); transform-origin: 100% 0; transition: transform 280ms var(--og-flap);
}
.og-iconbtn[aria-pressed="true"] .og-iconbtn__ear { transform: scale(1); }
.og-iconbtn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.og-iconbtn__badge {
position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
background: var(--coral); color: var(--ink); font: 700 11px/18px var(--font-display); text-align: center;
box-shadow: 0 0 0 2px var(--og-ground);
}
/* ==========================================================================
Toggle: a paper flap that flips over as it travels
========================================================================== */
.og-toggle {
display: inline-flex; align-items: center; gap: 12px; padding: 2px; margin: 0; border: 0; background: none;
font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm);
}
.og-toggle__track {
position: relative; flex: none; width: 52px; height: 30px; border-radius: var(--radius-xs);
background: var(--paper-shade);
box-shadow: inset 0 0 0 1px rgb(38 36 56 / .3), var(--shadow-inset);
perspective: 180px;
transition: background-color 260ms var(--og-crease) 120ms;
}
.og-toggle__track::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, rgb(255 255 255 / .28) 0 50%, rgb(38 36 56 / .07) 50% 100%); box-shadow: inset 1px 0 0 0 transparent; }
.og-toggle__track::after { content: ""; position: absolute; z-index: 0; left: 50%; top: 3px; bottom: 3px; width: 1px; margin-left: -.5px; background: rgb(38 36 56 / .18); pointer-events: none; }
.og-toggle[aria-checked="true"] .og-toggle__track { background: var(--teal); }
.og-toggle__flap {
position: absolute; z-index: 1; top: 4px; left: 4px; width: 22px; height: 22px;
transform-style: preserve-3d;
transform: translateX(0) rotateY(0);
transition: transform var(--og-t-flap) var(--og-flap);
}
.og-toggle[aria-checked="true"] .og-toggle__flap { transform: translateX(22px) rotateY(180deg); }
.og-toggle:hover .og-toggle__flap { transform: translateX(0) rotateY(-22deg); }
.og-toggle[aria-checked="true"]:hover .og-toggle__flap { transform: translateX(22px) rotateY(158deg); }
.og-toggle__face {
position: absolute; inset: 0; display: grid; place-items: center; border-radius: 2px;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
box-shadow: var(--shadow-flat), inset 0 0 0 1px rgb(38 36 56 / .14);
}
.og-toggle__face--front { background: linear-gradient(135deg, var(--paper) 50%, var(--paper-shade) 50%); }
.og-toggle__face--back { background: linear-gradient(135deg, var(--butter) 50%, color-mix(in srgb, var(--butter) 86%, #262438) 50%); color: var(--ink); transform: rotateY(180deg); }
.og-toggle__face--back .og-icon { width: 14px; height: 14px; stroke-width: 2.6; }
.og-toggle__text { display: flex; flex-direction: column; }
.og-toggle__label { font-weight: 500; }
.og-toggle__hint { font-size: 13px; line-height: 18px; color: var(--og-ink-soft); }
.og-toggle--sm .og-toggle__track { width: 42px; height: 24px; }
.og-toggle--sm .og-toggle__flap { top: 3px; left: 3px; width: 18px; height: 18px; }
.og-toggle--sm[aria-checked="true"] .og-toggle__flap { transform: translateX(18px) rotateY(180deg); }
.og-toggle--sm[aria-checked="true"]:hover .og-toggle__flap { transform: translateX(18px) rotateY(158deg); }
.og-toggle:disabled { opacity: .5; cursor: not-allowed; }
.og-toggle:disabled .og-toggle__flap { transition: none; }
/* ==========================================================================
Checkbox + Radio
========================================================================== */
.og-check, .og-radio { position: relative; display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 15px; line-height: 22px; color: inherit; }
.og-check__input, .og-radio__input { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.og-check__text { display: flex; flex-direction: column; }
.og-check__hint { font-size: 13px; line-height: 18px; color: var(--og-ink-soft); }
.og-check__box {
position: relative; flex: none; width: 22px; height: 22px; border-radius: var(--radius-xs);
background: var(--paper);
box-shadow: inset 0 0 0 1.5px var(--ink-soft), var(--shadow-flat);
perspective: 90px;
transition: background-color 0s linear 170ms, box-shadow 0s linear 170ms;
}
.og-check__flap { position: absolute; inset: 1.5px; transform-style: preserve-3d; transform: rotate3d(1, -1, 0, 0deg); transition: transform 380ms var(--og-flap); }
.og-check__face { position: absolute; inset: 0; border-radius: 2px; background: var(--paper); clip-path: polygon(0 0, 100% 0, 0 100%); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.og-check__face--back { background: color-mix(in srgb, var(--coral) 78%, #262438); transform: rotate3d(1, 1, 0, 180deg); }
.og-check__mark, .og-check__dash { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; stroke: var(--ink); stroke-width: 2.6; opacity: 0; transform: scale(.4) rotate(-25deg); transition: opacity 120ms, transform 300ms var(--og-flap); }
.og-check__input:checked + .og-check__box { background: var(--coral); box-shadow: inset 0 0 0 1.5px rgb(38 36 56 / .4), var(--shadow-flat); }
.og-check__input:checked + .og-check__box .og-check__flap { transform: rotate3d(1, -1, 0, 180deg); }
.og-check__input:checked + .og-check__box .og-check__mark { opacity: 1; transform: none; transition-delay: 170ms; }
.og-check__input:indeterminate + .og-check__box { background: var(--butter); box-shadow: inset 0 0 0 1.5px rgb(38 36 56 / .4), var(--shadow-flat); }
.og-check__input:indeterminate + .og-check__box .og-check__dash { opacity: 1; transform: none; }
.og-check__input:indeterminate + .og-check__box .og-check__face { opacity: 0; }
.og-check:hover .og-check__input:not(:checked):not(:disabled) + .og-check__box .og-check__flap { transform: rotate3d(1, -1, 0, 28deg); }
.og-check__input:focus-visible + .og-check__box, .og-radio__input:focus-visible + .og-radio__disc { outline: 2px solid var(--focus); outline-offset: 2px; }
.og-paper .og-check__input:focus-visible + .og-check__box, .og-paper .og-radio__input:focus-visible + .og-radio__disc { outline-color: var(--indigo); }
.og-check__input:disabled ~ *, .og-radio__input:disabled ~ * { opacity: .5; }
.og-check__input:disabled, .og-radio__input:disabled { cursor: not-allowed; }
.og-radio__disc {
position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink-soft), var(--shadow-flat);
perspective: 80px; transition: background-color 200ms var(--og-crease), box-shadow 200ms;
}
.og-radio__dot { width: 9px; height: 9px; border-radius: 1px; background: var(--paper); transform: rotate(45deg) rotateY(90deg) scale(.4); transition: transform 420ms var(--og-flap); }
.og-radio__input:checked + .og-radio__disc { background: var(--indigo); box-shadow: inset 0 0 0 1.5px var(--indigo), var(--shadow-flat); }
.og-radio__input:checked + .og-radio__disc .og-radio__dot { transform: rotate(45deg) rotateY(0deg) scale(1); background: linear-gradient(90deg, var(--paper) 50%, var(--paper-shade) 50%); }
.og-radiogroup { display: flex; flex-direction: column; gap: 12px; }
.og-radiogroup--inline { flex-direction: row; flex-wrap: wrap; gap: 20px; }
/* ==========================================================================
TextField
========================================================================== */
.og-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.og-field__label { font: 700 11px/16px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--og-ink-soft); }
.og-field__opt { font-weight: 500; letter-spacing: .02em; text-transform: none; }
.og-field__control {
position: relative; isolation: isolate; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px;
background: var(--paper); color: var(--ink); border-radius: var(--radius-sm);
box-shadow: inset 0 0 0 1px rgb(38 36 56 / .16), inset 0 -1.5px 0 var(--ink-soft), var(--shadow-flat);
transition: transform 220ms var(--og-unfold), box-shadow 220ms ease;
}
.og-field__control::before {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; z-index: -1; border-radius: 0 0 var(--radius-sm) var(--radius-sm); pointer-events: none;
background: linear-gradient(to bottom, rgb(38 36 56 / .035), rgb(38 36 56 / .015));
}
.og-field__control:focus-within { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--indigo), var(--shadow-lift); }
.og-field__crease { position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px; border-radius: 2px; background: var(--indigo); transform: scaleX(0); transform-origin: 0 50%; transition: transform 380ms var(--og-unfold); pointer-events: none; }
.og-field__control:focus-within .og-field__crease { transform: scaleX(1); }
.og-field__icon { width: 18px; height: 18px; color: var(--ink-soft); }
.og-field__input { flex: 1; min-width: 0; padding: 11px 0; border: 0; outline: none; background: transparent; color: var(--ink); font: 400 15px/24px var(--font-body); resize: vertical; }
.og-field__input::placeholder { color: var(--ink-soft); opacity: .85; }
textarea.og-field__input { padding: 11px 0; }
.og-field__control:has(textarea) { align-items: flex-start; }
.og-field__suffix { font: 600 13px/1 var(--font-display); color: var(--ink-soft); }
.og-field__hint { font-size: 13px; line-height: 18px; color: var(--og-ink-soft); }
.og-field.is-invalid .og-field__control { box-shadow: inset 0 0 0 1.5px var(--coral-text), var(--shadow-flat); }
.og-field.is-invalid .og-field__crease { background: var(--coral-text); transform: scaleX(1); }
.og-field__error {
align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 0 10px; padding: 5px 10px 4px 8px;
background: var(--coral); color: var(--ink); font: 600 13px/18px var(--font-body);
border-radius: 0 0 var(--radius-xs) var(--radius-xs); transform-origin: 50% 0;
box-shadow: 0 2px 4px -2px rgb(38 36 56 / .3);
background-image: linear-gradient(to bottom, rgb(38 36 56 / .12), rgb(38 36 56 / 0) 5px);
}
.og-field__error[hidden] { display: none; }
.og-field__error .og-icon { width: 15px; height: 15px; stroke-width: 2.2; }
.og-field__error.is-unfolding { animation: og-drop 460ms var(--og-unfold) backwards; }
.og-field__control.is-shaking { animation: og-shake 380ms var(--og-crease); }
/* ==========================================================================
Menu + Select: the dropdown unfolds leaf by leaf, like a paper fan
========================================================================== */
.og-dropdown { position: relative; display: inline-block; }
.og-dropdown--block { display: block; }
.og-menu {
position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 228px; padding: 6px;
background: var(--paper); color: var(--ink); border-radius: var(--radius-sm); box-shadow: var(--shadow-float);
transform-origin: 50% 0;
}
.og-menu[hidden] { display: none; }
.og-menu--end { left: auto; right: 0; }
.og-menu--block { right: 0; min-width: 0; }
.og-menu.is-unfolding { animation: og-menu-in 300ms var(--og-unfold) backwards; }
.og-menu.is-unfolding > * { animation: og-leaf 460ms var(--og-unfold) backwards; animation-delay: calc(var(--i, 0) * 36ms + 30ms); }
.og-menu.is-unfolding > :nth-child(even) { animation-name: og-leaf-up; }
.og-menu.is-closing { opacity: 0; transform: perspective(700px) rotateX(-55deg); transition: opacity 180ms var(--og-fold), transform 200ms var(--og-fold); pointer-events: none; }
.og-menu__item {
position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px;
border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink);
font: 500 15px/20px var(--font-body); text-align: left; cursor: pointer; transform-origin: 50% 0; outline: none;
}
.og-menu > :nth-child(even) { transform-origin: 50% 100%; }
.og-menu__item:nth-child(even)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(38 36 56 / .025); pointer-events: none; }
.og-menu__item:hover, .og-menu__item:focus { background: var(--paper-shade); }
.og-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--indigo); }
.og-menu__item[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.og-menu__icon { width: 18px; height: 18px; color: var(--ink-soft); }
.og-menu__label { flex: 1; min-width: 0; }
.og-menu__hint { font-size: 13px; color: var(--ink-soft); }
.og-menu__item--danger { color: var(--coral-text); }
.og-menu__item--danger .og-menu__icon { color: var(--coral-text); }
.og-menu__tick { width: 16px; height: 16px; stroke-width: 2.4; color: var(--indigo); opacity: 0; }
.og-menu__item[aria-selected="true"] { font-weight: 700; }
.og-menu__item[aria-selected="true"] .og-menu__tick { opacity: 1; }
.og-menu__sep { height: 1px; margin: 5px 6px; background: var(--crease); }
.og-menu__heading { padding: 8px 10px 4px; font: 700 11px/16px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.og-select__trigger { width: 100%; border: 0; cursor: pointer; font: inherit; text-align: left; }
.og-select__value { flex: 1; min-width: 0; font: 400 15px/24px var(--font-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 11px 0; }
.og-select__value.is-placeholder { color: var(--ink-soft); }
.og-select__chev { width: 18px; height: 18px; color: var(--ink-soft); transition: transform 380ms var(--og-flap); }
.og-dropdown.is-open .og-select__chev { transform: rotateX(180deg); }
.og-dropdown.is-open .og-select__trigger { box-shadow: inset 0 0 0 1.5px var(--indigo), var(--shadow-lift); }
.og-dropdown.is-open .og-select__trigger .og-field__crease { transform: scaleX(1); }
.og-dropdown.is-open > .og-btn .og-btn__icon--end { transform: rotate(180deg); }
.og-btn__icon--end { transition: transform 300ms var(--og-flap); }
/* ==========================================================================
Tabs
========================================================================== */
.og-tabs { min-width: 0; max-width: 100%; }
.og-tabs__scroller { overflow-x: auto; scrollbar-width: none; margin: 0 -6px; padding: 4px 6px 0; }
.og-tabs__scroller::-webkit-scrollbar { display: none; }
.og-tabs__list { position: relative; display: flex; gap: 2px; min-width: max-content; box-shadow: inset 0 -1px 0 var(--og-rule); }
.og-tabs__tab {
position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; margin: 0;
border: 0; background: none; color: var(--og-ink-soft); font: 600 15px/1 var(--font-display); white-space: nowrap; cursor: pointer;
border-radius: var(--radius-xs) var(--radius-xs) 0 0; transition: color 160ms ease;
}
.og-tabs__tab .og-icon { width: 18px; height: 18px; }
.og-tabs__tab:hover, .og-tabs__tab[aria-selected="true"] { color: var(--og-ink); }
.og-tabs__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--paper-shade); color: var(--ink); font: 700 11px/20px var(--font-display); text-align: center; }
.og-tabs__tab[aria-selected="true"] .og-tabs__count { background: var(--butter); }
.og-tabs__ind { position: absolute; left: 0; bottom: 0; width: 1px; height: 3px; border-radius: 2px; background: var(--coral); transform-origin: 0 0; transition: transform 440ms var(--og-unfold); pointer-events: none; }
.og-tabs:not(.is-ready) .og-tabs__ind { transition: none; }
.og-tabs__panel { padding-top: var(--space-4); transform-origin: 0 50%; outline: none; }
.og-tabs__panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-xs); }
.og-tabs__panel.is-unfolding { animation: og-page-r 520ms var(--og-unfold) backwards; }
.og-tabs__panel.is-unfolding.from-left { animation-name: og-page-l; transform-origin: 100% 50%; }
.og-tabs--folder .og-tabs__list { gap: 4px; }
.og-tabs--folder .og-tabs__tab { background: var(--paper-shade); color: var(--ink-soft); margin-top: 4px; height: 40px; box-shadow: inset 0 -1px 0 rgb(38 36 56 / .1); }
.og-tabs--folder .og-tabs__tab:hover { color: var(--ink); }
.og-tabs--folder .og-tabs__tab[aria-selected="true"] { background: var(--paper); color: var(--ink); margin-top: 0; height: 44px; box-shadow: 0 -2px 6px -3px rgb(38 36 56 / .25); }
.og-tabs--folder .og-tabs__ind { display: none; }
/* ==========================================================================
SegmentedControl: the thumb is a sheet that flexes as it is dragged
========================================================================== */
.og-seg {
position: relative; display: inline-grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 4px;
border-radius: var(--radius-md); background: var(--paper-shade);
box-shadow: var(--shadow-inset), inset 0 0 0 1px rgb(38 36 56 / .12);
}
.og-seg--block { display: grid; width: 100%; }
.og-seg__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); transition: transform 460ms var(--og-unfold); perspective: 420px; pointer-events: none; }
.og-seg__sheet { position: absolute; inset: 0; isolation: isolate; border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow-flat); transform-origin: 0 50%; }
.og-seg__sheet::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(100deg, rgb(255 255 255 / .3) 0 50%, rgb(38 36 56 / .05) 50% 100%); }
.og-seg__sheet.is-flexing { animation: og-flex-r 480ms var(--og-unfold); }
.og-seg__sheet.is-flexing.to-left { animation-name: og-flex-l; transform-origin: 100% 50%; }
.og-seg__opt {
position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
height: 36px; padding: 0 16px; margin: 0; border: 0; background: none; border-radius: var(--radius-sm);
color: var(--ink-soft); font: 600 14px/1 var(--font-display); white-space: nowrap; cursor: pointer; transition: color 200ms ease;
}
.og-seg__opt .og-icon { width: 17px; height: 17px; }
.og-seg__opt[aria-checked="true"], .og-seg__opt:hover { color: var(--ink); }
.og-seg__opt:focus-visible { outline-color: var(--indigo); outline-offset: -2px; }
.og-seg--sm .og-seg__opt { height: 30px; padding: 0 12px; font-size: 13px; }
/* ==========================================================================
Slider: a scored groove and a folded kite
========================================================================== */
.og-slider { display: flex; flex-direction: column; gap: 8px; min-width: 180px; }
.og-slider__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.og-slider__label { font: 700 11px/16px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--og-ink-soft); }
.og-slider__out { font: 700 16px/20px var(--font-display); color: var(--og-ink); font-variant-numeric: tabular-nums; }
.og-slider__track { position: relative; height: 32px; margin: 0 11px; cursor: pointer; touch-action: none; }
.og-slider__groove { position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 999px; overflow: hidden; background: var(--paper-shade); box-shadow: var(--shadow-inset), inset 0 0 0 1px rgb(38 36 56 / .2); }
.og-slider__fill {
position: absolute; inset: 0; background-color: var(--coral); transform: translateX(-100%); transition: transform 120ms var(--og-crease);
background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .2) 0 5px, transparent 5px 10px);
}
.og-slider__ticks i { position: absolute; top: calc(50% + 8px); width: 1.5px; height: 5px; margin-left: -.75px; border-radius: 1px; background: var(--og-rule); }
.og-slider__thumb { position: absolute; left: -12px; top: 50%; width: 24px; height: 24px; margin-top: -12px; outline: none; transition: transform 120ms var(--og-crease); }
.og-slider.is-dragging .og-slider__thumb, .og-slider.is-dragging .og-slider__fill { transition: none; }
.og-slider__kite {
position: absolute; inset: 3px; border-radius: 2px;
background: linear-gradient(90deg, var(--paper) 50%, var(--paper-shade) 50%);
box-shadow: inset 0 0 0 1.5px var(--ink-soft), var(--shadow-lift);
transform: rotate(calc(45deg + var(--og-kite, 0deg))) scale(1);
transition: transform 260ms var(--og-flap);
}
.og-slider__track:hover .og-slider__kite, .og-slider.is-dragging .og-slider__kite { transform: rotate(calc(45deg + var(--og-kite, 0deg))) scale(1.14); }
.og-slider__thumb:focus-visible .og-slider__kite { outline: 2px solid var(--focus); outline-offset: 3px; }
.og-paper .og-slider__thumb:focus-visible .og-slider__kite { outline-color: var(--indigo); }
.og-slider__tag {
position: absolute; left: 50%; bottom: calc(100% + 8px); padding: 3px 8px; white-space: nowrap; pointer-events: none;
background: var(--indigo); color: var(--on-indigo); font: 700 12px/16px var(--font-display); border-radius: var(--radius-xs);
box-shadow: var(--shadow-flat); transform-origin: 50% 100%;
transform: translateX(-50%) perspective(300px) rotateX(-90deg); opacity: 0;
transition: transform 320ms var(--og-unfold), opacity 140ms ease;
}
.og-slider.is-dragging .og-slider__tag, .og-slider__thumb:focus-visible .og-slider__tag { transform: translateX(-50%) perspective(300px) rotateX(0deg); opacity: 1; }
.og-slider__ends { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--og-ink-soft); }
.og-slider.is-disabled { opacity: .5; }
.og-slider.is-disabled .og-slider__track { cursor: not-allowed; }
/* ==========================================================================
Card
========================================================================== */
.og-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: var(--space-5); transition: transform 280ms var(--og-unfold), box-shadow 280ms ease; }
.og-card--compact { padding: var(--space-4); gap: 8px; }
.og-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.og-card__titles { min-width: 0; }
.og-card__eyebrow { font: 700 11px/16px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--og-ink-soft); margin-bottom: 4px; }
.og-card__title { margin: 0; font: 700 20px/26px var(--font-display); letter-spacing: -.01em; }
.og-card__body { color: var(--og-ink-soft); font-size: 15px; line-height: 23px; }
.og-card__body p { margin: 0; }
.og-card__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.og-card__media { margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; overflow: hidden; }
.og-card--compact .og-card__media { margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0; }
.og-card--interactive { cursor: pointer; color: var(--og-ink); text-decoration: none; transform-origin: 50% 100%; }
.og-card--lift { transform-origin: 50% 100%; }
.og-card--lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.og-card--lift:hover > .og-ear { transform: scale(1); }
.og-card--interactive::after, .og-card--lift::after { content: ""; position: absolute; inset: 0 -4px -10px -4px; z-index: -2; }
.og-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.og-card--interactive:hover > .og-ear, .og-tl__card:hover > .og-ear, .og-ear.is-up { transform: scale(1); }
.og-card--interactive.is-pressed { transform: perspective(900px) rotateY(var(--og-tilt, 0deg)) rotateX(var(--og-tiltx, 0deg)) scale(.985); box-shadow: var(--shadow-press); transition-duration: var(--og-t-press); }
/* ==========================================================================
Badge + Tag
========================================================================== */
.og-badge {
position: relative; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; overflow: hidden;
border-radius: 999px; background: var(--og-fill); color: var(--og-ink);
font: 700 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
box-shadow: inset 0 0 0 1px rgb(38 36 56 / .14);
}
.og-badge::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 56%, rgb(38 36 56 / .07) 56%); }
.og-badge .og-icon { width: 12px; height: 12px; stroke-width: 2.2; }
.og-badge--dot { padding-left: 21px; }
.og-badge--dot::after { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.og-tag {
position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 24px;
background: var(--og-fill); color: var(--og-ink); font: 600 13px/1 var(--font-body); white-space: nowrap;
clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%);
border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
transform-origin: 0 50%; transition: transform 260ms var(--og-fold), opacity 220ms ease;
}
.og-tag::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(255 255 255 / .25) 0 50%, rgb(38 36 56 / .06) 50%); }
.og-tag::after { content: ""; position: absolute; right: 0; top: 0; width: 9px; height: 9px; background: linear-gradient(to bottom left, var(--og-ground) 50%, rgb(255 255 255 / .8) 50%); }
.og-tag__hole { position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--og-ground); box-shadow: inset 0 1px 1px rgb(38 36 56 / .35); }
.og-tag .og-icon { width: 14px; height: 14px; }
.og-tag__x { position: relative; display: grid; place-items: center; width: 20px; height: 20px; margin: 0 -6px 0 0; padding: 0; border: 0; border-radius: var(--radius-xs); background: transparent; color: inherit; cursor: pointer; }
.og-tag__x:hover { background: rgb(38 36 56 / .1); }
.og-tag__x .og-icon { width: 13px; height: 13px; stroke-width: 2.2; }
.og-tag.is-leaving { transform: perspective(300px) rotateY(-88deg); opacity: 0; }
/* ==========================================================================
Avatar
========================================================================== */
.og-avatar {
--og-fill: var(--blush); --og-ink: var(--ink);
position: relative; isolation: isolate; display: inline-grid; place-items: center; flex: none;
width: 40px; height: 40px; border-radius: var(--radius-sm);
background: var(--og-fill); color: var(--og-ink); font: 700 15px/1 var(--font-display);
box-shadow: var(--shadow-flat);
}
.og-avatar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, rgb(255 255 255 / .25) 50%, rgb(38 36 56 / .09) 50%); pointer-events: none; }
.og-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.og-avatar--xs { width: 24px; height: 24px; font-size: 10px; border-radius: 4px; }
.og-avatar--sm { width: 32px; height: 32px; font-size: 12px; border-radius: 5px; }
.og-avatar--lg { width: 56px; height: 56px; font-size: 20px; }
.og-avatar--xl { width: 80px; height: 80px; font-size: 28px; border-radius: var(--radius-md); }
.og-avatar--more { --og-fill: var(--paper-shade); --og-ink: var(--ink); }
.og-avatar__status { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 2px var(--og-ground); }
.og-avatar__status--online { background: var(--teal-text); }
.og-avatar__status--away { background: var(--butter); }
.og-avatar__status--busy { background: var(--coral-text); }
.og-avstack { display: inline-flex; }
.og-avstack .og-avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--og-ground), var(--shadow-flat); transition: transform 240ms var(--og-unfold); }
.og-avstack .og-avatar:first-child { margin-left: 0; }
.og-avstack .og-avatar:hover { transform: translateY(-4px) rotate(-5deg); z-index: 2; }
/* ==========================================================================
Tooltip: a note that unfolds from its tail
========================================================================== */
.og-tipwrap { position: relative; display: inline-flex; }
.og-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 70; display: none; width: max-content; max-width: min(240px, calc(100vw - 16px)); transform: translateX(calc(-50% + var(--og-tip-dx, 0px))); pointer-events: none; }
.og-tipwrap.is-shown .og-tip { display: block; }
.og-tip__note::after { margin-left: calc(-5px - var(--og-tip-dx, 0px)) !important; }
.og-tip--bottom { bottom: auto; top: calc(100% + 10px); }
.og-tip__note {
position: relative; isolation: isolate; display: block; padding: 7px 11px; border-radius: var(--radius-xs);
background: var(--indigo); color: var(--on-indigo); font: 500 13px/18px var(--font-body); text-align: center;
box-shadow: var(--shadow-float); transform-origin: 50% 100%;
transform: perspective(400px) rotateX(-90deg); opacity: 0;
transition: transform 360ms var(--og-unfold), opacity 120ms ease;
}
.og-tip__note::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgb(255 255 255 / .07) 50%, rgb(0 0 0 / .12) 50%); }
.og-tip__note::after { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; margin: -6px 0 0 -5px; background: var(--indigo); transform: rotate(45deg); border-radius: 0 0 2px 0; z-index: -2; }
.og-tip--bottom .og-tip__note { transform-origin: 50% 0; transform: perspective(400px) rotateX(90deg); }
.og-tip--bottom .og-tip__note::after { top: auto; bottom: 100%; margin: 0 0 -6px -5px; border-radius: 2px 0 0 0; }
.og-tipwrap.is-open .og-tip__note { transform: perspective(400px) rotateX(0deg); opacity: 1; }
/* ==========================================================================
Toast: a paper plane glides in, lands, and unfolds into the note
========================================================================== */
.og-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.og-toasts--inline { position: static; width: 100%; max-width: 380px; }
.og-toastfly { position: relative; width: 100%; pointer-events: auto; }
.og-toast { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px; box-shadow: var(--shadow-float); transform-origin: 0 50%; }
.og-toast__chip { position: relative; isolation: isolate; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-xs); background: var(--og-fill); color: var(--og-ink); }
.og-toast__chip::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, rgb(255 255 255 / .22) 50%, rgb(38 36 56 / .1) 50%); }
.og-toast__chip .og-icon { width: 18px; height: 18px; stroke-width: 2; }
.og-toast__text { flex: 1; min-width: 0; padding-top: 1px; }
.og-toast__title { font: 600 15px/20px var(--font-display); }
.og-toast__msg { font-size: 14px; line-height: 20px; color: var(--og-ink-soft); }
.og-toast__action { margin: 6px 0 0; padding: 0; border: 0; background: none; color: var(--coral-text); font: 700 14px/20px var(--font-display); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.og-toast__x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: -4px -4px 0 0; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--ink-soft); cursor: pointer; }
.og-toast__x:hover { background: var(--paper-shade); color: var(--ink); }
.og-toast__x .og-icon { width: 16px; height: 16px; }
.og-plane { overflow: visible; transform-origin: 50% 50%; }
.og-plane__wing { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.og-plane__body { fill: var(--paper-shade); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.og-plane__keel { fill: color-mix(in srgb, var(--paper-shade) 75%, #262438); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.og-toastfly__plane { position: absolute; left: -10px; top: calc(50% - 16px); z-index: 2; width: 48px; height: 32px; opacity: 0; pointer-events: none; }
.og-toastfly.is-arriving .og-toastfly__plane { animation: og-plane-in var(--og-t-glide) var(--og-glide) backwards; }
.og-toastfly.is-arriving .og-toast { animation: og-note-unfold 560ms var(--og-unfold) 600ms backwards; }
.og-toastfly.is-leaving .og-toast { transform: perspective(900px) rotateY(-88deg); opacity: 0; transition: transform 280ms var(--og-fold), opacity 160ms ease 120ms; }
.og-toastfly.is-leaving .og-toastfly__plane { animation: og-plane-out 640ms var(--og-fold) 180ms backwards; }
/* ==========================================================================
Modal: a letter, folded in thirds, unfolds from its top crease
========================================================================== */
.og-modal { position: fixed; inset: 0; z-index: 90; display: flex; padding: 16px; overflow-y: auto; }
.og-modal__scrim { position: fixed; inset: 0; background: rgb(22 25 53 / .42); }
[data-theme="dark"] .og-modal__scrim { background: rgb(5 6 20 / .62); }
.og-modal__panel {
position: relative; isolation: isolate; margin: auto; width: min(520px, 100%); padding: var(--space-6);
background: var(--paper); color: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-float);
--og-ink: var(--ink); --og-ink-soft: var(--ink-soft); --og-rule: var(--crease); --og-ground: var(--paper);
transform-origin: 50% 0;
}
.og-modal__panel--sm { width: min(400px, 100%); }
.og-modal__panel--lg { width: min(680px, 100%); }
.og-modal__panel::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
background:
linear-gradient(to bottom, transparent calc(33.33% - 1px), rgb(38 36 56 / .06) calc(33.33% - 1px) 33.33%, rgb(255 255 255 / .8) 33.33% calc(33.33% + 1px), transparent calc(33.33% + 1px) calc(66.66% - 1px), rgb(38 36 56 / .06) calc(66.66% - 1px) 66.66%, rgb(255 255 255 / .8) 66.66% calc(66.66% + 1px), transparent calc(66.66% + 1px)),
linear-gradient(to bottom, rgb(255 255 255 / .35) 0, rgb(255 255 255 / 0) 33.33%, rgb(38 36 56 / .035) 33.33%, rgb(38 36 56 / .012) 66.66%, rgb(255 255 255 / .3) 66.66%, rgb(255 255 255 / 0) 100%);
}
.og-modal__shade { position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(to bottom, rgb(38 36 56 / .05), rgb(38 36 56 / .4)); }
.og-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.og-modal__eyebrow { font: 700 11px/16px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.og-modal__title { margin: 0; font: 700 26px/32px var(--font-display); letter-spacing: -.015em; }
.og-modal__x { margin: -6px -8px 0 0; }
.og-modal__body { color: var(--ink-soft); }
.og-modal__body > p { margin: 0 0 12px; }
.og-modal__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: var(--space-5); }
.og-modal.is-opening .og-modal__scrim { animation: og-fade 280ms ease backwards; }
.og-modal.is-opening .og-modal__panel { animation: og-letter 720ms cubic-bezier(.3, .75, .35, 1) backwards; }
.og-modal.is-opening .og-modal__shade { animation: og-shade 640ms ease-out backwards; }
.og-modal.is-opening .og-modal__head { animation: og-rise 460ms var(--og-unfold) 260ms backwards; }
.og-modal.is-opening .og-modal__body { animation: og-rise 460ms var(--og-unfold) 320ms backwards; }
.og-modal.is-opening .og-modal__foot { animation: og-rise 460ms var(--og-unfold) 380ms backwards; }
.og-modal.is-closing .og-modal__scrim { opacity: 0; transition: opacity 280ms ease; }
.og-modal.is-closing .og-modal__panel { transform: perspective(1400px) rotateX(-82deg) translateY(-12px); opacity: 0; transition: transform 300ms var(--og-fold), opacity 220ms ease 80ms; }
/* ==========================================================================
Progress
========================================================================== */
.og-progress { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.og-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; line-height: 18px; }
.og-progress__label { font-weight: 600; color: var(--og-ink); }
.og-progress__val { color: var(--og-ink-soft); font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 600; }
.og-progress__track { position: relative; height: 10px; overflow: hidden; border-radius: var(--radius-xs); background: var(--paper-shade); box-shadow: var(--shadow-inset), inset 0 0 0 1px rgb(38 36 56 / .16); }
.og-progress--lg .og-progress__track { height: 16px; }
.og-progress__fill {
position: absolute; inset: 0; background-color: var(--og-fill); transform: translateX(-100%);
background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .2) 0 6px, transparent 6px 12px);
transition: transform 760ms var(--og-unfold);
}
.og-progress__fill::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 8px; background: linear-gradient(to bottom left, rgb(255 255 255 / .55) 50%, rgb(38 36 56 / .16) 50%); }
.og-progress.is-complete .og-progress__fill { background-color: var(--teal); }
.og-progress__cells { display: flex; gap: 6px; perspective: 300px; }
.og-progress__cell { position: relative; flex: 1; height: 12px; transform-style: preserve-3d; transition: transform 560ms var(--og-flap); transition-delay: calc(var(--i) * 60ms); }
.og-progress__cell.is-done { transform: rotateX(180deg); }
.og-progress__front, .og-progress__back { position: absolute; inset: 0; border-radius: 2px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.og-progress__front { background: var(--paper-shade); box-shadow: inset 0 0 0 1px rgb(38 36 56 / .22); }
.og-progress__back { background: linear-gradient(100deg, var(--coral) 50%, color-mix(in srgb, var(--coral) 85%, #262438) 50%); transform: rotateX(180deg); }
/* ==========================================================================
Fold: the accordion folds like a map
========================================================================== */
.og-foldlist { display: flex; flex-direction: column; gap: 6px; }
.og-fold { --og-angle: 100deg; transition: box-shadow 220ms ease; }
.og-fold--odd { --og-angle: 80deg; }
.og-fold:hover { box-shadow: var(--shadow-lift); }
.og-fold__head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 0; padding: 12px 14px 12px 16px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.og-fold__chip { position: relative; isolation: isolate; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-xs); background: var(--og-fill); color: var(--og-ink); }
.og-fold__chip::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, rgb(255 255 255 / .22) 50%, rgb(38 36 56 / .1) 50%); }
.og-fold__chip .og-icon { width: 18px; height: 18px; }
.og-fold__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.og-fold__title { font: 600 17px/22px var(--font-display); }
.og-fold__meta { font-size: 13px; line-height: 18px; color: var(--og-ink-soft); }
.og-fold__aside { flex: none; }
.og-fold__chev { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-xs); background: var(--paper-shade); color: var(--ink); transition: transform 460ms var(--og-flap); }
.og-fold__chev .og-icon { width: 17px; height: 17px; }
.og-fold.is-open .og-fold__chev { transform: perspective(120px) rotateX(180deg); }
.og-fold__body { padding: 0 12px 12px; }
.og-fold__sheet {
position: relative; isolation: isolate; padding: 16px; border-radius: var(--radius-xs); transform-origin: 50% 0;
color: var(--ink); background-color: var(--paper);
box-shadow: inset 0 0 0 1px rgb(38 36 56 / .08), 0 1px 2px rgb(38 36 56 / .06);
}
.og-fold__sheet::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
background:
linear-gradient(90deg, transparent calc(50% - 1px), rgb(38 36 56 / .07) calc(50% - 1px) 50%, rgb(255 255 255 / .8) 50% calc(50% + 1px), transparent calc(50% + 1px)),
linear-gradient(90deg, rgb(255 255 255 / .3) 0 50%, rgb(38 36 56 / .025) 50% 100%);
}
.og-fold__content { position: relative; }
.og-fold__content > p { margin: 0; color: var(--ink-soft); }
.og-fold__shade { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgb(38 36 56 / 0) 50%, rgb(38 36 56 / .28) 50%), linear-gradient(rgb(38 36 56 / .02), rgb(38 36 56 / .25)); }
.og-fold__sheet.is-unfolding { animation: og-mapfold 680ms cubic-bezier(.3, .75, .35, 1) backwards; }
.og-fold__sheet.is-unfolding .og-fold__shade { animation: og-shade 760ms ease-out backwards; }
.og-fold__sheet.is-folding { transform: perspective(900px) rotateX(-90deg); opacity: 0; transition: transform 240ms var(--og-fold), opacity 180ms ease 60ms; }
/* ==========================================================================
Crane: the loader — four corners fold to the centre, the sheet turns, unfolds
========================================================================== */
.og-crane { --s: 40px; position: relative; display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; }
.og-crane--xs { --s: 16px; }
.og-crane--sm { --s: 24px; }
.og-crane--lg { --s: 64px; }
.og-crane__sheet {
position: relative; flex: none; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .05);
background: var(--paper); box-shadow: var(--shadow-flat), inset 0 0 0 1px rgb(38 36 56 / .16);
perspective: calc(var(--s) * 4);
animation: og-crane-turn 3.2s cubic-bezier(.6, 0, .3, 1) infinite;
}
.og-crane__sheet::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(45deg, transparent calc(50% - .6px), rgb(38 36 56 / .2) 50%, transparent calc(50% + .6px)), linear-gradient(-45deg, transparent calc(50% - .6px), rgb(38 36 56 / .2) 50%, transparent calc(50% + .6px));
}
.og-crane__flap { position: absolute; width: 50%; height: 50%; transform-style: preserve-3d; animation: og-crane-fold 3.2s cubic-bezier(.5, 0, .3, 1) infinite; }
.og-crane__flap--tl { left: 0; top: 0; --ax: 1; --ay: -1; --bx: 1; --by: 1; animation-delay: 0s; }
.og-crane__flap--tr { right: 0; top: 0; --ax: 1; --ay: 1; --bx: 1; --by: -1; animation-delay: .12s; }
.og-crane__flap--br { right: 0; bottom: 0; --ax: 1; --ay: -1; --bx: 1; --by: 1; animation-delay: .24s; }
.og-crane__flap--bl { left: 0; bottom: 0; --ax: 1; --ay: 1; --bx: 1; --by: -1; animation-delay: .36s; }
.og-crane__face { position: absolute; inset: 0; background: var(--paper); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.og-crane__flap--tl .og-crane__face { clip-path: polygon(0 0, 100% 0, 0 100%); }
.og-crane__flap--tr .og-crane__face { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.og-crane__flap--br .og-crane__face { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.og-crane__flap--bl .og-crane__face { clip-path: polygon(0 0, 100% 100%, 0 100%); }
.og-crane__face--back { transform: rotate3d(var(--bx), var(--by), 0, 180deg); }
.og-crane__flap--tl .og-crane__face--back { background: var(--coral); }
.og-crane__flap--tr .og-crane__face--back { background: var(--teal); }
.og-crane__flap--br .og-crane__face--back { background: var(--butter); }
.og-crane__flap--bl .og-crane__face--back { background: var(--blush); }
.og-crane__label { font: 600 14px/20px var(--font-display); color: var(--og-ink-soft); }
/* ==========================================================================
FlapCard: the lower flap folds up along the crease to reveal what's behind
========================================================================== */
.og-flapcard { display: grid; grid-template-rows: 1fr 1fr; min-height: 260px; perspective: 1200px; }
.og-flap__top { padding: var(--space-5); min-width: 0; }
.og-flap__inside { padding: var(--space-5); min-width: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: rgb(38 36 56 / .04); box-shadow: inset 0 10px 12px -10px rgb(38 36 56 / .3); }
.og-flap__flap { position: absolute; left: 0; right: 0; top: 50%; bottom: 0; z-index: 2; transform-origin: 50% 0; transform-style: preserve-3d; transform: rotateX(0deg); transition: transform 760ms var(--og-unfold); }
.og-flapcard:not(.is-open):hover .og-flap__flap { transform: rotateX(16deg); }
.og-flapcard.is-open .og-flap__flap { transform: rotateX(180deg); }
.og-flap__face {
position: absolute; inset: 0; isolation: isolate; padding: var(--space-5); overflow: hidden;
border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--og-fill); color: var(--og-ink);
backface-visibility: hidden; -webkit-backface-visibility: hidden;
box-shadow: 0 -1px 0 rgb(38 36 56 / .1), var(--shadow-flat);
}
.og-flap__face::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(170deg, rgb(255 255 255 / .2) 0 40%, rgb(38 36 56 / .07) 40%); }
.og-flap__face--back { --og-fill: var(--paper-shade); --og-ink: var(--ink); transform: rotateX(180deg); border-radius: var(--radius-sm) var(--radius-sm) 0 0; display: grid; place-items: center; }
.og-flapcard.is-open .og-flap__face--back { box-shadow: var(--shadow-lift); }
.og-flap__hint { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/20px var(--font-display); color: var(--ink-soft); }
.og-flap__hint .og-icon { width: 18px; height: 18px; }
.og-flap__toggle { position: absolute; left: 0; right: 0; top: 50%; bottom: 0; z-index: 4; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.og-flapcard.is-open .og-flap__toggle { top: 0; bottom: 50%; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.og-flap__toggle:focus-visible { outline: 2px solid var(--indigo); outline-offset: -4px; }
/* ==========================================================================
Widgets: StatCard, Timeline, PassCard, Trifold
========================================================================== */
.og-stat { display: flex; flex-direction: column; gap: 4px; padding: var(--space-5); min-width: 0; --og-bar: rgb(38 36 56 / .12); --og-bar-hi: var(--coral); }
.og-stat.og-tone-indigo { --og-bar: rgb(255 255 255 / .2); --og-bar-hi: var(--butter); }
.og-stat.og-tone-coral, .og-stat.og-tone-teal, .og-stat.og-tone-butter, .og-stat.og-tone-blush { --og-bar: rgb(38 36 56 / .16); --og-bar-hi: var(--paper); }
.og-stat__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.og-stat__label { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/16px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--og-ink-soft); }
.og-stat__label .og-icon { width: 16px; height: 16px; }
.og-stat__value { font: 800 40px/46px var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.og-stat__foot { font-size: 13px; line-height: 18px; color: var(--og-ink-soft); }
.og-stat__delta { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px 0 6px; border-radius: 999px; font: 700 13px/1 var(--font-display); background: var(--teal); color: var(--ink); }
.og-stat__delta.is-down { background: var(--blush); }
.og-stat__delta .og-icon { width: 13px; height: 13px; stroke-width: 2.4; }
.og-stat__bars { display: flex; align-items: flex-end; gap: 5px; height: 56px; margin-top: 10px; }
.og-stat__bar { position: relative; flex: 1; min-height: 4px; height: calc(var(--h) * 100%); border-radius: 2px 2px 0 0; background: var(--og-bar); transform-origin: 50% 100%; animation: og-grow 680ms var(--og-unfold) backwards; animation-delay: calc(var(--i) * 40ms + 140ms); }
.og-stat__bar.is-last { background: var(--og-bar-hi); }
.og-stat__bar.is-last::after { content: ""; position: absolute; right: 0; top: 0; width: 7px; height: 7px; background: linear-gradient(to bottom left, var(--og-fill) 50%, rgb(38 36 56 / .2) 50%); }
.og-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.og-tl { position: relative; display: grid; grid-template-columns: 52px 34px minmax(0, 1fr); column-gap: 12px; }
.og-tl__time { display: flex; flex-direction: column; align-items: flex-end; padding-top: 15px; font: 700 14px/18px var(--font-display); color: var(--og-ink); font-variant-numeric: tabular-nums; }
.og-tl__dur { font: 500 12px/16px var(--font-body); color: var(--og-ink-soft); }
.og-tl__rail { position: relative; display: flex; justify-content: center; }
.og-tl__rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1.5px dashed var(--og-rule); }
.og-tl:first-child .og-tl__rail::before { top: 24px; }
.og-tl:last-child .og-tl__rail::before { bottom: auto; height: 24px; }
.og-tl__node { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 12px; border-radius: var(--radius-xs); background: var(--og-fill); color: var(--og-ink); box-shadow: var(--shadow-flat); transform: rotate(45deg); }
.og-tl__node::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgb(255 255 255 / .25) 50%, rgb(38 36 56 / .1) 50%); }
.og-tl__node .og-icon { position: relative; width: 15px; height: 15px; transform: rotate(-45deg); stroke-width: 2; }
.og-tl.is-done .og-tl__node { --og-fill: var(--paper-shade); --og-ink: var(--ink); }
.og-tl__plane { position: absolute; left: 50%; top: 46px; z-index: 2; width: 26px; height: 18px; margin-left: -13px; transform: rotate(90deg); animation: og-bob 2.8s ease-in-out infinite; }
.og-tl__card { margin: 6px 0 10px; padding: 12px 14px; transition: transform 240ms var(--og-unfold), box-shadow 240ms ease; }
.og-tl__card::after { content: ""; position: absolute; inset: 0 -4px -8px -4px; z-index: -2; }
.og-tl__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.og-tl.is-current .og-tl__card { box-shadow: var(--shadow-lift), 0 0 0 2px var(--coral); }
.og-tl__title { font: 600 16px/22px var(--font-display); }
.og-tl.is-done .og-tl__title { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: rgb(38 36 56 / .35); }
.og-tl__place { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.og-tl__place .og-icon { width: 14px; height: 14px; }
.og-tl__note { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.og-tl__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.og-pass { --og-fill: var(--paper); --og-ink: var(--ink); --og-ink-soft: var(--ink-soft); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 128px; perspective: 1100px; color: var(--og-ink); }
.og-pass__main { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px 20px; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--og-fill); box-shadow: var(--shadow-flat); }
.og-pass__main::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(105deg, var(--og-hi, rgb(255 255 255 / .28)) 0 52%, var(--og-sh, rgb(38 36 56 / .05)) 52%); }
.og-pass__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 700 11px/16px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--og-ink-soft); }
.og-pass__carrier { display: inline-flex; align-items: center; gap: 6px; }
.og-pass__carrier .og-icon { width: 16px; height: 16px; }
.og-pass__route { display: flex; align-items: center; gap: 10px; }
.og-pass__port { min-width: 0; }
.og-pass__port.is-to { text-align: right; }
.og-pass__code { font: 800 32px/34px var(--font-display); letter-spacing: -.02em; }
.og-pass__city { font-size: 13px; line-height: 18px; color: var(--og-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-pass__time { font: 700 15px/20px var(--font-display); }
.og-pass__path { position: relative; flex: 1; min-width: 40px; height: 22px; display: grid; place-items: center; }
.og-pass__path::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed var(--og-rule, var(--crease)); }
.og-pass__plane { position: relative; width: 30px; height: 20px; }
.og-pass__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.og-pass__kv { display: flex; flex-direction: column; }
.og-pass__kv span { font: 700 10px/14px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--og-ink-soft); }
.og-pass__kv b { font: 700 16px/22px var(--font-display); }
.og-pass__stub { position: relative; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.og-pass__stub::before, .og-pass__stub::after { content: ""; position: absolute; left: -8px; z-index: 4; width: 16px; height: 16px; border-radius: 50%; background: var(--og-ground); }
.og-pass__stub::before { top: -8px; }
.og-pass__stub::after { bottom: -8px; }
.og-pass__behind { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--paper-shade); color: var(--ink); font: 600 14px/18px var(--font-display); box-shadow: var(--shadow-inset); }
.og-pass__flap { position: absolute; inset: 0; z-index: 2; transform-origin: 0 50%; transform-style: preserve-3d; transform: rotateY(0deg); transition: transform 780ms var(--og-unfold); }
.og-pass:not(.is-open):hover .og-pass__flap { transform: rotateY(-18deg); }
.og-pass.is-open .og-pass__flap { transform: rotateY(-180deg); }
.og-pass__face {
position: absolute; inset: 0; isolation: isolate; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px;
border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--og-fill); color: var(--og-ink);
border-left: 2px dashed var(--crease); box-shadow: var(--shadow-flat);
backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.og-pass__face::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, rgb(38 36 56 / .06), rgb(38 36 56 / 0) 30%); }
.og-pass__face--back { transform: rotateY(180deg); align-items: center; border-left: 0; border-right: 2px dashed var(--crease); border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--paper); color: var(--ink); }
.og-pass__peek { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font: 600 12px/16px var(--font-display); color: var(--og-ink-soft); }
.og-pass__peek .og-icon { width: 14px; height: 14px; }
.og-qr { width: 76px; height: 76px; fill: var(--ink); shape-rendering: crispEdges; }
.og-pass__ref { font: 700 12px/16px var(--font-display); letter-spacing: .08em; color: var(--ink-soft); }
.og-pass__toggle { position: absolute; top: 0; bottom: 0; right: 0; width: 128px; z-index: 5; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.og-pass.is-open .og-pass__toggle { right: 128px; border-radius: 0; }
.og-pass__toggle:focus-visible { outline-offset: -4px; outline-color: var(--indigo); }
.og-pass.og-tone-indigo { --og-ink-soft: var(--on-indigo); --og-rule: rgb(255 255 255 / .35); }
.og-pass.og-tone-indigo .og-pass__face { border-left-color: rgb(255 255 255 / .3); }
@media (max-width: 480px) {
.og-pass { grid-template-columns: minmax(0, 1fr) 104px; }
.og-pass__toggle { width: 104px; }
.og-pass.is-open .og-pass__toggle { right: 104px; }
.og-pass__code { font-size: 26px; line-height: 30px; }
.og-pass__main { padding: 16px; }
.og-pass__face { padding: 12px; }
.og-qr { width: 64px; height: 64px; }
}
.og-trifold-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.og-trifold { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; perspective: 2200px; }
.og-tri__panel { position: relative; min-width: 0; transition: transform 1000ms var(--og-unfold); }
.og-tri__panel--l { z-index: 3; transform-origin: 100% 50%; transform-style: preserve-3d; transform: rotateY(0deg); transition-delay: 0ms; }
.og-tri__panel--m { z-index: 1; }
.og-tri__panel--r { z-index: 2; transform-origin: 0 50%; transform-style: preserve-3d; transform: rotateY(0deg); transition-delay: 420ms; }
.og-trifold.is-folded .og-tri__panel--l { transform: rotateY(180deg); transition-delay: 360ms; }
.og-trifold.is-folded .og-tri__panel--r { transform: rotateY(-180deg); transition-delay: 0ms; }
.og-tri__face {
position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 280px; padding: 28px 24px;
background: var(--og-fill); color: var(--og-ink); box-shadow: var(--shadow-flat);
backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.og-tri__face::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, rgb(255 255 255 / .28), rgb(255 255 255 / 0)); }
.og-tri__panel--m .og-tri__face::before { background: linear-gradient(90deg, rgb(38 36 56 / .05), rgb(38 36 56 / .015)); }
.og-tri__face::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: rgb(38 36 56 / .4); opacity: 0; transition: opacity 1000ms ease; }
.og-tri__panel--l .og-tri__face::after { transition-delay: 0ms; }
.og-tri__panel--r .og-tri__face::after { transition-delay: 420ms; }
.og-trifold.is-folded .og-tri__panel--l .og-tri__face::after, .og-trifold.is-folded .og-tri__panel--r .og-tri__face::after { opacity: 1; }
.og-tri__panel--l .og-tri__face { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.og-tri__panel--r .og-tri__face { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.og-tri__back { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 24px; border-radius: var(--radius-md); background: var(--og-fill); color: var(--og-ink); transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: var(--shadow-lift); overflow: hidden; }
.og-tri__inner { background: var(--paper-shade); box-shadow: none; }
.og-tri__covertitle { position: relative; font: 800 30px/32px var(--font-display); letter-spacing: -.02em; }
.og-tri__cover .og-tri__eyebrow { position: relative; color: var(--og-ink); opacity: .85; }
.og-tri__covermark { position: absolute; right: -30px; top: -30px; width: 170px; height: 170px; background: conic-gradient(from 45deg, var(--coral) 0 25%, var(--butter) 0 50%, var(--teal) 0 75%, var(--blush) 0); transform: rotate(45deg); border-radius: 6px; opacity: .9; }
.og-tri__chip { position: relative; isolation: isolate; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-xs); background: var(--og-fill); color: var(--og-ink); margin-bottom: 6px; }
.og-tri__chip::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, rgb(255 255 255 / .22) 50%, rgb(38 36 56 / .1) 50%); }
.og-tri__eyebrow { font: 700 11px/16px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--og-ink-soft); }
.og-tri__title { margin: 0; font: 700 22px/28px var(--font-display); letter-spacing: -.01em; }
.og-tri__body { margin: 0; color: var(--og-ink-soft); }
.og-tri__face > .og-badge, .og-tri__face > .og-tag { align-self: flex-start; }
.og-trifold__ctl { display: flex; justify-content: center; }
@media (max-width: 720px) {
.og-trifold { grid-template-columns: minmax(0, 1fr); }
.og-tri__panel--l { transform-origin: 50% 100%; transform: rotateX(0deg); }
.og-tri__panel--r { transform-origin: 50% 0; transform: rotateX(0deg); }
.og-trifold.is-folded .og-tri__panel--l { transform: rotateX(-180deg); }
.og-trifold.is-folded .og-tri__panel--r { transform: rotateX(180deg); }
.og-tri__back { transform: rotateX(180deg); }
.og-tri__face { min-height: 220px; }
.og-tri__panel--l .og-tri__face { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.og-tri__panel--r .og-tri__face { border-radius: 0 0 var(--radius-md) var(--radius-md); }
}
/* ==========================================================================
Utilities: unfold anything on a hinge (entrances; fill backwards)
========================================================================== */
.og-unfold-y { transform-origin: 50% 0; animation: og-mapfold 760ms cubic-bezier(.3, .75, .35, 1) backwards; animation-delay: calc(var(--d, 0) * 90ms); }
.og-unfold-x { transform-origin: 0 50%; animation: og-hinge-x 760ms cubic-bezier(.3, .75, .35, 1) backwards; animation-delay: calc(var(--d, 0) * 90ms); }
.og-swap { transform-origin: 0 50%; animation: og-page-r 520ms var(--og-unfold) backwards; }
.og-swap.from-left { transform-origin: 100% 50%; animation-name: og-page-l; }
.og-modal--inline { position: relative; inset: auto; z-index: auto; padding: 0; width: min(440px, 100%); }
.og-modal--inline .og-modal__scrim { display: none; }
.og-modal--inline .og-modal__panel { margin: 0; }
/* ==========================================================================
Keyframes
========================================================================== */
@keyframes og-fade { from { opacity: 0; } }
@keyframes og-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes og-drop { from { opacity: 0; transform: perspective(400px) rotateX(-90deg); } 40% { opacity: 1; } }
@keyframes og-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px) rotate(-.6deg); } 45% { transform: translateX(5px) rotate(.4deg); } 70% { transform: translateX(-3px); } 85% { transform: translateX(1px); } }
@keyframes og-menu-in { from { opacity: 0; transform: perspective(700px) rotateX(-40deg); } }
@keyframes og-leaf { from { opacity: 0; transform: perspective(500px) rotateX(-90deg); } 50% { opacity: 1; } }
@keyframes og-leaf-up { from { opacity: 0; transform: perspective(500px) rotateX(90deg); } 50% { opacity: 1; } }
@keyframes og-page-r { from { opacity: 0; transform: perspective(1400px) rotateY(-24deg) translateX(10px); } }
@keyframes og-page-l { from { opacity: 0; transform: perspective(1400px) rotateY(24deg) translateX(-10px); } }
@keyframes og-flex-r { 0% { transform: none; } 35% { transform: rotateY(-26deg); } 72% { transform: rotateY(5deg); } 100% { transform: none; } }
@keyframes og-flex-l { 0% { transform: none; } 35% { transform: rotateY(26deg); } 72% { transform: rotateY(-5deg); } 100% { transform: none; } }
@keyframes og-letter {
0% { opacity: 0; transform: perspective(1400px) translateY(-28px) rotateX(-88deg); }
22% { opacity: 1; }
62% { transform: perspective(1400px) translateY(0) rotateX(7deg); }
82% { transform: perspective(1400px) translateY(0) rotateX(-2deg); }
100% { transform: perspective(1400px) translateY(0) rotateX(0deg); }
}
@keyframes og-mapfold {
0% { opacity: 0; transform: perspective(900px) rotateX(-92deg); }
25% { opacity: 1; }
64% { transform: perspective(900px) rotateX(9deg); }
84% { transform: perspective(900px) rotateX(-2deg); }
100% { transform: perspective(900px) rotateX(0deg); }
}
@keyframes og-hinge-x {
0% { opacity: 0; transform: perspective(1200px) rotateY(-92deg); }
25% { opacity: 1; }
64% { transform: perspective(1200px) rotateY(9deg); }
84% { transform: perspective(1200px) rotateY(-2deg); }
100% { transform: perspective(1200px) rotateY(0deg); }
}
@keyframes og-shade { 0% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes og-crane-fold {
0%, 6% { transform: rotate3d(var(--ax), var(--ay), 0, 0deg); }
24%, 66% { transform: rotate3d(var(--ax), var(--ay), 0, 180deg); }
86%, 100% { transform: rotate3d(var(--ax), var(--ay), 0, 0deg); }
}
@keyframes og-crane-turn { 0%, 34% { transform: rotate(0deg); } 54%, 100% { transform: rotate(90deg); } }
@keyframes og-plane-in {
0% { opacity: 0; transform: translate(300px, -130px) rotate(-25.3deg) scaleX(-1) scale(1.1); }
10% { opacity: 1; transform: translate(262px, -112px) rotate(-25.2deg) scaleX(-1) scale(1.08); }
38% { opacity: 1; transform: translate(160px, -64px) rotate(-25.7deg) scaleX(-1) scale(1.04); }
66% { opacity: 1; transform: translate(58px, -14px) rotate(-22.8deg) scaleX(-1) scale(1); }
84% { opacity: 1; transform: translate(10px, -1px) rotate(-14.5deg) scaleX(-1) scale(0.92); }
100% { opacity: 0; transform: translate(0px, 1px) rotate(-11.3deg) scaleX(-1) scale(0.55); }
}
@keyframes og-plane-out {
0% { opacity: 0; transform: translate(6px, 0px) rotate(-17.4deg) scale(0.6); }
14% { opacity: 1; transform: translate(22px, -5px) rotate(-34.2deg) scale(1); }
55% { opacity: 1; transform: translate(150px, -98px) rotate(-37.9deg) scale(1.08); }
100% { opacity: 0; transform: translate(360px, -268px) rotate(-39.0deg) scale(1.2); }
}
@keyframes og-note-unfold { from { opacity: 0; transform: perspective(900px) rotateY(-86deg); } 35% { opacity: 1; } }
@keyframes og-grow { from { transform: scaleY(0); } }
@keyframes og-bob { 0%, 100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(3px); } }
/* ==========================================================================
Reduced motion: no movement, state still changes
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
.og-crane__sheet, .og-crane__flap, .og-tl__plane { animation: none !important; }
.og-crane__flap--tl, .og-crane__flap--br { transform: rotate3d(var(--ax), var(--ay), 0, 180deg); }
.og-btn:hover, .og-iconbtn:hover { transform: none; }
}