/* ========================================================================= Paper-cut layers, "The lotus and the sun" (includes/design-heroes/papercut.php is its hero). Cut paper lit from behind: planes with deckle edges and one soft paper shadow, a lotus that opens as the sun rises. Loaded after base, nav, hero and layout; every selector is under html[data-direction="papercut"], so no other direction (and no live page) is touched. Sections: 1 structure (rhythm, hero, cards) · 2 tokens · 3 type · 4 navigation · 5 hero · 6 components · 7 surfaces (portal, desks) · 8 motion. ========================================================================= */ /* ------------------------------------------------------------------------------------------------ 1. structure -- */ /* public sections: 64 px on phones, 96 px between sections from tablets up; every alternate band is a second sheet of paper laid over the first */ html[data-direction="papercut"] .dp-band { padding-block: 64px; } @media (min-width: 768px) { html[data-direction="papercut"] .dp-band { padding-block: 96px; } } html[data-direction="papercut"] .dp-band--alt { z-index: 1; margin-top: 8px; box-shadow: 0 -10px 18px -14px rgba(0, 0, 0, .5), 0 10px 18px -14px rgba(0, 0, 0, .5); } html[data-direction="papercut"] .dp-band--alt::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; background: var(--dp-sunken); -webkit-mask: radial-gradient(circle at 8px 8px, #000 7px, transparent 7.5px) 0 0 / 16px 8px repeat-x; mask: radial-gradient(circle at 8px 8px, #000 7px, transparent 7.5px) 0 0 / 16px 8px repeat-x; } /* the paper cards: one soft shadow instead of a border, and a deckle edge (a row of paper teeth) along the top */ html[data-direction="papercut"] :is(.dp-card, .dp-finding, .dp-step, .dp-word, .dp-notice, .dp-split__side) { position: relative; margin-top: 8px; border-color: transparent; box-shadow: var(--elev); border-radius: 0 0 var(--r-m) var(--r-m); } html[data-direction="papercut"] :is(.dp-card, .dp-finding, .dp-step, .dp-word, .dp-notice, .dp-split__side)::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; background: var(--dp-surface); pointer-events: none; -webkit-mask: radial-gradient(circle at 8px 8px, #000 7px, transparent 7.5px) 0 0 / 16px 8px repeat-x; mask: radial-gradient(circle at 8px 8px, #000 7px, transparent 7.5px) 0 0 / 16px 8px repeat-x; } html[data-direction="papercut"] .dp-events { border-color: transparent; box-shadow: var(--elev); } html[data-direction="papercut"] .dp-date { border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--hair-c, rgba(217, 119, 6, .2)); } html[data-direction="papercut"] .dp-scroller > li { flex-basis: min(300px, 82%); } /* the part of the hero copy under the layered hero: a strip of paper */ html[data-direction="papercut"] .dp-hero-extra { padding-block: 24px 16px; background: var(--dp-sunken); box-shadow: 0 -8px 16px -12px rgba(0, 0, 0, .5); position: relative; z-index: 1; } html[data-direction="papercut"] .dp-reassure { gap: 8px 12px; } html[data-direction="papercut"] .dp-reassure li { display: inline-flex; align-items: center; min-height: 32px; padding: 0 16px; border-radius: 999px; background: var(--dp-surface); box-shadow: var(--elev); } html[data-direction="papercut"] .dp-reassure li::before { content: ""; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent, currentColor); } /* the hero: a split. The copy is a sheet of paper in the left 5/12 and the sun and the lotus stand in the right 7/12 (the art's axis is at 60% of its width); phones: the picture is a 3:4 sheet with the copy paper lapped over its foot. The header band is the card and 24 px above and below. */ html[data-direction="papercut"] .dh[data-dh-variant="full"] { min-height: clamp(580px, 88svh, 880px); } html[data-direction="papercut"] .dh__copy { align-items: flex-end; } html[data-direction="papercut"] .dh__panel { position: relative; max-width: min(36rem, 41.7%); margin-top: 8px; border: 0; border-radius: 0 0 var(--r-l) var(--r-l); box-shadow: var(--elev); -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-direction="papercut"] .dh__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; background: var(--dh-scrim); pointer-events: none; -webkit-mask: radial-gradient(circle at 8px 8px, #000 7px, transparent 7.5px) 0 0 / 16px 8px repeat-x; mask: radial-gradient(circle at 8px 8px, #000 7px, transparent 7.5px) 0 0 / 16px 8px repeat-x; } html[data-direction="papercut"] .dh[data-dh-variant="header"] { min-height: 0; } html[data-direction="papercut"] .dh[data-dh-variant="header"] .dh__copy { align-items: center; padding-block: 48px 32px; } html[data-direction="papercut"] .dh[data-dh-variant="header"] .dh__panel { max-width: min(34rem, 100%); } @media (max-width: 899.98px) { html[data-direction="papercut"] .dh__panel { max-width: min(36rem, 46%); } } @media (max-width: 599.98px) { html[data-direction="papercut"] .dh[data-dh-variant="full"] { flex-direction: column; min-height: 0; } html[data-direction="papercut"] .dh[data-dh-variant="full"] .dh__stage { position: relative; inset: auto; flex: none; width: 100%; aspect-ratio: 3 / 4; } html[data-direction="papercut"] .dh[data-dh-variant="full"] .dh__copy { flex: none; margin-top: -132px; padding: 0; } html[data-direction="papercut"] .dh__panel, html[data-direction="papercut"] .dh[data-dh-variant="header"] .dh__panel { max-width: none; width: 100%; border-radius: 0; } } /* ------------------------------------------------------------------------------------------------ 2. tokens -- */ /* the neutrals of both themes, on and on (the UK light palette sets its --ds-* on , and tokens.css holds the portal's --c-* with !important) */ @font-face { font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../fonts/cinzel-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } html[data-direction="papercut"] { --r-s: 10px; --r-m: 18px; --r-l: 28px; --t-xs: 13px; --t-s: 16.5px; --t-m: 20px; --t-l: 26px; --t-xl: clamp(27px, 1.6vw + 21px, 36px); --t-2xl: clamp(30px, 2vw + 20px, 52px); --ds-step--1: var(--t-xs); --ds-step-0: var(--t-s); --ds-step-1: var(--t-m); --ds-step-2: var(--t-l); --ds-step-3: var(--t-xl); --ds-step-4: var(--t-xl); --ds-step-5: var(--t-2xl); --display: "Cinzel", "Cinzel Fallback", "Cormorant Garamond", Georgia, serif; --serif: var(--sans); --font-display: var(--display); --sans: "Plus Jakarta Sans", "Jakarta Fallback", "Mukta", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: var(--sans); --font-sans: var(--sans); --ds-dur-1: 160ms; --ds-dur-2: 240ms; --ds-dur-3: 480ms; --ds-radius-s: var(--r-s); --ds-radius-m: var(--r-m); --ds-radius-l: var(--r-l); --dn-radius: var(--r-s); --dn-font-display: var(--display); --dn-font-body: var(--sans); --dn-dur: 160ms; --dn-blur: 0px; } html.dark[data-direction="papercut"], html.dark[data-direction="papercut"] body, html[data-direction="papercut"][data-theme="dark"] { --parchment: #120B14; --surface: #1E1320; --sunken: #281A2B; --line: rgba(245, 183, 91, .2); --ink: #FBF3E6; --muted: #C9B8A8; --accent: #F5B75B; --gold-text: #F5B75B; --amber-ink: #F5B75B; --amber: #F5B75B; --focus: #F5B75B; --vermilion: #881337; --deep-vermilion: #881337; --imperial-crimson: #881337; --vermilion-deep: #A0183F; --on-vermilion: #FFF7EE; --card-border: rgba(245, 183, 91, .2); --header-bg: rgba(30, 19, 32, .96); --header-bg-solid: #1E1320; --header-bg-opaque: #120B14; --glass: rgba(30, 19, 32, .94); --glass-panel: rgba(30, 19, 32, .9); --canvas-underlay: radial-gradient(900px 520px at 86% -8%, rgba(245, 183, 91, .07), transparent 65%); --elev: 0 1px 0 rgba(0, 0, 0, .35), 0 12px 24px -12px rgba(0, 0, 0, .6); --hair: 1px solid rgba(245, 183, 91, .2); --hair-c: rgba(245, 183, 91, .2); --shadow-soft: var(--elev); --shadow-lift: 0 1px 0 rgba(0, 0, 0, .35), 0 18px 32px -12px rgba(0, 0, 0, .7); --edge-glow: var(--elev); --ds-canvas: #120B14; --ds-surface: #1E1320; --ds-sunken: #281A2B; --ds-raised: #281A2B; --ds-ink: #FBF3E6; --ds-muted: #C9B8A8; --ds-gold-ink: #F5B75B; --ds-line: rgba(245, 183, 91, .2); --ds-panel: none; --ds-texture: radial-gradient(900px 520px at 86% -8%, rgba(245, 183, 91, .07), transparent 65%); --pc-fibre: url("data:image/svg+xml;utf8,"); color-scheme: dark; } html[data-direction="papercut"]:not(.dark), html[data-direction="papercut"][data-direction]:not(.dark) body { --parchment: #FBF5EA; --surface: #FFF9EE; --sunken: #F3EADA; --line: rgba(151, 88, 0, .26); --ink: #2C1919; --muted: #67534C; --accent: #8C1832; --gold-text: #975800; --amber-ink: #975800; --amber: #975800; --focus: #8C1832; --vermilion: #8C1832; --deep-vermilion: #8C1832; --imperial-crimson: #8C1832; --vermilion-deep: #6F1226; --on-vermilion: #FFF7EE; --card-border: rgba(151, 88, 0, .26); --header-bg: rgba(255, 249, 238, .96); --header-bg-solid: #FFF9EE; --header-bg-opaque: #FBF5EA; --glass: rgba(255, 249, 238, .94); --glass-panel: rgba(255, 249, 238, .9); --canvas-underlay: radial-gradient(900px 520px at 86% -8%, rgba(245, 183, 91, .22), transparent 65%); --elev: 0 1px 0 rgba(120, 70, 40, .14), 0 12px 24px -12px rgba(110, 60, 40, .32); --hair: 1px solid rgba(151, 88, 0, .26); --hair-c: rgba(151, 88, 0, .26); --shadow-soft: var(--elev); --shadow-lift: 0 1px 0 rgba(120, 70, 40, .14), 0 18px 32px -12px rgba(110, 60, 40, .4); --edge-glow: var(--elev); --ds-canvas: #FBF5EA; --ds-surface: #FFF9EE; --ds-sunken: #F3EADA; --ds-raised: #FFF9EE; --ds-ink: #2C1919; --ds-muted: #67534C; --ds-gold-ink: #975800; --ds-rose: #8C1832; --ds-line: rgba(151, 88, 0, .26); --ds-panel: none; --ds-texture: radial-gradient(900px 520px at 86% -8%, rgba(245, 183, 91, .22), transparent 65%); --pc-fibre: url("data:image/svg+xml;utf8,"); color-scheme: light; } /* the portal reads --c-*: tokens.css holds its neutrals with !important, so these do too */ html.dark[data-direction="papercut"] { --c-canvas: #120B14 !important; --c-surface: #1E1320 !important; --c-sunken: #281A2B !important; --c-ink: #FBF3E6 !important; --c-muted: #C9B8A8 !important; --c-line: rgba(245, 183, 91, .2) !important; } html[data-direction="papercut"]:not(.dark) { --c-canvas: #FBF5EA !important; --c-surface: #FFF9EE !important; --c-sunken: #F3EADA !important; --c-ink: #2C1919 !important; --c-muted: #67534C !important; --c-line: rgba(151, 88, 0, .26) !important; } /* the first-paint script sets an onyx inline background on : the plum and the cream replace it */ html.dark[data-direction="papercut"] { background-color: #120B14 !important; } html[data-direction="papercut"]:not(.dark) { background-color: #FBF5EA !important; } html[data-direction="papercut"] body, html[data-direction="papercut"] body[class] { background-color: var(--parchment) !important; background-image: var(--pc-fibre); font-family: var(--font-body); font-size: var(--t-s); } /* ---------------------------------------------------------------------------------------------------- 3. type -- */ html[data-direction="papercut"] :is(h1, h2, h3, h4, h5, .g-title, .g-h2, .g-h3, .dh__title, .dn__name, .dp-event__title, .dp-card__t, .dp-hero__h) { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; line-height: 1.2; text-wrap: balance; text-transform: none; } /* Cinzel capitals: the hero, the page title and the brand; on the public pages also the section titles. Everything else reads in sentence case */ html[data-direction="papercut"] :is(h1, .g-title, .dh__title, .dp-hero__h, .dn__name) { font-family: var(--display); letter-spacing: .01em; } html[data-direction-surface="public"][data-direction="papercut"] :is(h2, .g-h2, .dp-band__h) { font-family: var(--display); letter-spacing: .01em; } html[data-direction-surface="public"][data-direction="papercut"] :is(h1, .g-title, .dh__title, .dp-hero__h) { font-size: var(--t-2xl); line-height: 1.12; } html[data-direction-surface="public"][data-direction="papercut"] :is(.g-h2, .dp-band__h, main h2) { font-size: var(--t-xl); } html[data-direction-surface="public"][data-direction="papercut"] :is(.g-h3, main h3) { font-size: var(--t-l); } html[data-direction="papercut"] :is(.dp-card__t, .dp-event__title) { font-size: var(--t-m); } html[data-direction="papercut"] :is(.dp-date__d, .dp-finding__n, .dp-step__n, .g-num, time) { font-variant-numeric: lining-nums tabular-nums; } html[data-direction="papercut"] .dh__lead { font-size: var(--t-s); } html[data-direction="papercut"] .dh__eyebrow { font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em; } /* -------------------------------------------------------------------------------------------- 4. navigation -- */ html[data-direction="papercut"] { --dn-bg: var(--header-bg); --dn-panel-bg: var(--surface); --dn-line: var(--line); --dn-surface: var(--surface); --dn-ink: var(--ink); --dn-muted: var(--muted); --dn-accent: var(--gold-text); --dn-cta-bg: var(--vermilion); --dn-cta-ink: #FFF7EE; --dn-shadow: var(--elev); } /* a paper strip with a soft paper shadow */ html[data-direction="papercut"] .dn::before { border-bottom: 0; box-shadow: var(--elev); -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-direction="papercut"] .dn__name { font-size: .95rem; letter-spacing: .02em; } html[data-direction="papercut"] .dn__panel { border-bottom: 0; border-radius: 0 0 var(--r-m) var(--r-m); box-shadow: var(--elev); -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-direction="papercut"] .dn__panel--me { border: 0; border-radius: var(--r-m); } html[data-direction="papercut"] .dn__cta, html[data-direction="papercut"] .dn__me { border-radius: 999px; } html[data-direction="papercut"] .dn__cta { border: 0; box-shadow: var(--elev); transition: transform 160ms ease, box-shadow 160ms ease; } html[data-direction="papercut"] .dn__cta:active { transform: translateY(2px); box-shadow: 0 0 0 transparent; } html[data-direction="papercut"] .dn__sheet { background: var(--parchment); background-image: var(--pc-fibre); } /* ----------------------------------------------------------------------------------------------------- 5. hero -- */ html[data-direction="papercut"] .dh { --dh-ink: #2C1919; --dh-muted: #4A3631; --dh-accent: #975800; --dh-action: #8C1832; --dh-line: rgba(151, 88, 0, .26); background: #FBF5EA; } html.dark[data-direction="papercut"] .dh { --dh-ink: #FBF3E6; --dh-muted: #E4D6C6; --dh-accent: #F5B75B; --dh-action: #881337; background: #120B14; } html[data-direction="papercut"] .dh__title { font-size: var(--t-2xl); } /* each plane lifts on its own, the sun furthest */ html[data-direction="papercut"] .dh-l--sun[data-reveal="rise"] { --dh-up: 28; } html[data-direction="papercut"] .dh-l--sun[data-reveal="rise"].is-in { --dh-up: 0; } html[data-direction="papercut"] .dh-l--arcade[data-reveal="rise"] { --dh-up: 14; } html[data-direction="papercut"] .dh-l--arcade[data-reveal="rise"].is-in { --dh-up: 0; } html[data-direction="papercut"] .dh-l--hills[data-reveal="rise"] { --dh-up: 12; } html[data-direction="papercut"] .dh-l--hills[data-reveal="rise"].is-in { --dh-up: 0; } html[data-direction="papercut"] .dh-l--pond[data-reveal="rise"] { --dh-up: 10; } html[data-direction="papercut"] .dh-l--pond[data-reveal="rise"].is-in { --dh-up: 0; } html[data-direction="papercut"] .dh-l--lotus[data-reveal="rise"] { --dh-up: 10; } html[data-direction="papercut"] .dh-l--lotus[data-reveal="rise"].is-in { --dh-up: 0; } html[data-direction="papercut"] .dh-l--reeds[data-reveal="rise"] { --dh-up: 14; } html[data-direction="papercut"] .dh-l--reeds[data-reveal="rise"].is-in { --dh-up: 0; } /* the paper shadow each plane throws on the one behind: one colour token, the nearer the plane the longer and softer the step */ html[data-direction="papercut"] { --pc-sh: rgba(0, 0, 0, .5); } html[data-direction="papercut"]:not(.dark) { --pc-sh: rgba(92, 44, 40, .38); } html[data-direction="papercut"] .dh-l--arcade .dh-l__c { filter: drop-shadow(0 -2px 3px var(--pc-sh)); } html[data-direction="papercut"] .dh-l--hills .dh-l__c { filter: drop-shadow(0 -4px 7px var(--pc-sh)); } html[data-direction="papercut"] .dh-l--pond .dh-l__c { filter: drop-shadow(0 -6px 10px var(--pc-sh)); } html[data-direction="papercut"] .dh-l--lotus .dh-l__c { filter: drop-shadow(0 -8px 12px var(--pc-sh)); } html[data-direction="papercut"] .dh-l--reeds .dh-l__c { filter: drop-shadow(0 -11px 16px var(--pc-sh)); } html[data-direction="papercut"] .dh-l--lamps .dh-l__c { filter: blur(6px) brightness(1.15); } /* the lotus opens as the sun rises: every petal turns on the shared base, the outer ones first */ html[data-direction="papercut"] .dh-l--lotus .pt { transform-box: view-box; transform-origin: 960px 600px; transform: rotate(calc(var(--a) * .08)) scaleY(.8); transition: transform 1900ms var(--dh-ease) calc(var(--i, 0) * 110ms); } html[data-direction="papercut"] .dh-l--lotus .pt:nth-of-type(2) { --i: 0; } html[data-direction="papercut"] .dh-l--lotus .pt:nth-of-type(3) { --i: 1; } html[data-direction="papercut"] .dh-l--lotus .pt:nth-of-type(4) { --i: 2; } html[data-direction="papercut"] .dh-l--lotus .pt:nth-of-type(5) { --i: 3; } html[data-direction="papercut"] .dh-l--lotus .pt:nth-of-type(6) { --i: 4; } html[data-direction="papercut"] .dh-l--lotus .pt:nth-of-type(7) { --i: 5; } html[data-direction="papercut"] .dh-l--lotus .pt:nth-of-type(8) { --i: 6; } html[data-direction="papercut"] .dh-l--lotus .pt:nth-of-type(9) { --i: 7; } html[data-direction="papercut"] .dh-l--lotus .pt:nth-of-type(10) { --i: 8; } html[data-direction="papercut"] .dh-l--lotus.is-in .pt, html[data-direction="papercut"] .dh.is-final .dh-l--lotus .pt, html[data-direction="papercut"] .dh:not(.is-armed) .dh-l--lotus .pt { transform: rotate(var(--a)); } html[data-direction="papercut"] .dh-l--lotus .bd { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.6); transition: transform 1600ms var(--dh-ease) 900ms; } html[data-direction="papercut"] .dh-l--lotus.is-in .bd, html[data-direction="papercut"] .dh.is-final .dh-l--lotus .bd, html[data-direction="papercut"] .dh:not(.is-armed) .dh-l--lotus .bd { transform: none; } /* slow ambient life (cycles of 8 s and more, only while the hero is on screen) */ html[data-direction="papercut"] .dh.is-run .dh-l--reeds .rd { transform-box: fill-box; transform-origin: 50% 100%; animation: pc-sway 9s ease-in-out infinite alternate; animation-delay: calc(var(--d, 0) * -2.3s); } html[data-direction="papercut"] .dh.is-run .dh-l--lamps .dh-l__c { animation: pc-glow 8s ease-in-out infinite alternate; } html[data-direction="papercut"] .dh.is-run .dh-l--sun .dh-l__c { animation: pc-breathe 12s ease-in-out infinite alternate; } @keyframes pc-sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.6deg); } } @keyframes pc-glow { from { opacity: .72; } to { opacity: 1; } } @keyframes pc-breathe { from { transform: scale(1); } to { transform: scale(1.025); } } /* the copy is paper: pills that press in */ html[data-direction="papercut"] .dh__btn { border-radius: 999px; transition: transform 160ms ease, box-shadow 160ms ease; } html[data-direction="papercut"] .dh__btn--primary { box-shadow: var(--elev); } html[data-direction="papercut"] .dh__btn--ghost { border-color: var(--dh-accent); } html[data-direction="papercut"] .dh__btn:active { transform: translateY(2px); box-shadow: none; } /* ----------------------------------------------------------------------------------------------- 6. components -- */ /* buttons: paper pills (the primary is the one filled vermilion; secondary is an outline), pressed in on tap */ html[data-direction="papercut"] :is(.g-btn, .btn, .dp-btn) { border-radius: 999px; transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease; } html[data-direction="papercut"] :is(.g-btn--primary, .btn--primary) { box-shadow: var(--elev); } html[data-direction="papercut"] :is(.g-btn, .btn, .dp-btn):active { transform: translateY(2px); box-shadow: none; } /* cards lift a little under a fine pointer */ @media (hover: hover) and (pointer: fine) { html[data-direction="papercut"] :is(.dp-card, .dp-finding, .dp-word, .dp-notice) { transition: transform 240ms ease, box-shadow 240ms ease; } html[data-direction="papercut"] .dp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } } /* forms: fields on paper, a visible focus ring */ html[data-direction="papercut"] :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), select, textarea) { border: 1px solid var(--line); border-radius: var(--r-s); background-color: var(--sunken); color: var(--ink); font-family: var(--font-body); } html[data-direction="papercut"] :is(input, select, textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* tabs: paper tabs, the open one is the sheet in front */ html[data-direction="papercut"] [role="tablist"] > [role="tab"], html[data-direction="papercut"] .acct-tabs button { border: 0; border-radius: var(--r-s) var(--r-s) 0 0; background: transparent; color: var(--muted); transition: background-color 160ms ease, color 160ms ease; } html[data-direction="papercut"] [role="tablist"] > [role="tab"][aria-selected="true"], html[data-direction="papercut"] .acct-tabs button[aria-selected="true"], html[data-direction="papercut"] .acct-tabs button.is-current { background: var(--surface); color: var(--ink); box-shadow: var(--elev); } /* data tables: rows on cream paper */ html[data-direction="papercut"] :is(.desk-table, .mc-table, .acct table) { border-collapse: separate; border-spacing: 0; } html[data-direction="papercut"] :is(.desk-table, .mc-table, .acct table) tbody tr:nth-child(odd) > * { background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%); } html[data-direction="papercut"] :is(.desk-table, .mc-table, .acct table) tbody tr:nth-child(even) > * { background: var(--surface); } html[data-direction="papercut"] :is(.desk-table, .mc-table, .acct table) thead th { background: var(--sunken); color: var(--ink); font-family: var(--font-body); } /* modals, toasts, chips */ html[data-direction="papercut"] :is(dialog, .modal, .toast) { border: 0; border-radius: var(--r-l); box-shadow: var(--shadow-lift); } html[data-direction="papercut"] dialog::backdrop { background: rgba(12, 7, 15, .6); } html[data-direction="papercut"] :is(.chip, .dp-chip) { border-radius: 999px; } /* the footer: the last sheet, lying a little under the page */ html[data-direction="papercut"] .site-footer { background: var(--sunken); color: var(--ink); box-shadow: 0 -10px 18px -14px rgba(0, 0, 0, .5); } /* ---------------------------------------------------------------------------------------- 7. portal and desks -- */ /* the portal and the desks read the tokens above; the desks' cards are paper too (one shadow, no border) */ html[data-direction="papercut"] :is(.desk-card, .djjs-card) { border-radius: var(--r-m); box-shadow: var(--elev); border-color: transparent; } /* ----------------------------------------------------------------------------------------------- 8. motion -- */ @media (prefers-reduced-motion: reduce) { html[data-direction="papercut"] *, html[data-direction="papercut"] *::before, html[data-direction="papercut"] *::after { transition-duration: .01ms !important; animation: none !important; } html[data-direction="papercut"] .dp-card:hover { transform: none; } } /* the navigation reads in the two Jakarta weights the page already preloads (400, 600): no late font swap in the bar */ html[data-direction="papercut"] :is(.dn__top, .dn__signin, .dn__me, .dn__l, .dn__omni .omni-trigger) { font-weight: 400; } /* the portal and the desks keep their own heading sizes (dense panels): only the face changes */ /* ------------------------------------------------------------------------------- 9. second pass: light, portal, radii -- */ /* the light card is the page's own cream: a hairline and no shadow set it apart (one border or one shadow, never both) */ html[data-direction="papercut"]:not(.dark) .dh__panel { border: var(--hair); border-top: 0; box-shadow: none; } /* the portal: cards are cut paper too (a deckle top edge, one hairline, no shadow), headings keep their own sizes */ html[data-direction="papercut"] #root :is(.glass, .djjs-col-card, .djjs-ah, .djjs-acc-strip, .portal-niyama-card) { border-radius: 0 0 var(--r-m) var(--r-m); box-shadow: none; border-color: var(--line); -webkit-mask: radial-gradient(circle at 8px 0, transparent 5px, #000 5.5px) 0 0 / 16px 9px repeat-x, linear-gradient(#000, #000) 0 8px / 100% calc(100% - 8px) no-repeat; mask: radial-gradient(circle at 8px 0, transparent 5px, #000 5.5px) 0 0 / 16px 9px repeat-x, linear-gradient(#000, #000) 0 8px / 100% calc(100% - 8px) no-repeat; } /* the radius family 10 / 18 / 28 and the pill, over the live 16-24 px of the portal bundle and the desks */ html[data-direction="papercut"] #root :is(.rounded-lg, .rounded-xl) { border-radius: var(--r-s); } html[data-direction="papercut"] #root :is(.rounded-2xl, .rounded-3xl, [class*="rounded-[1.5rem]"], [class*="rounded-[2rem]"]):not(.glass, .djjs-col-card, .djjs-ah, .djjs-acc-strip, .portal-niyama-card) { border-radius: var(--r-m); } html[data-direction="papercut"] #root :is(.djjs-up__card, .djjs-vrata__row) { border-radius: var(--r-s); } html[data-direction="papercut"] :is(.desk-card, .desk-table-wrap, .acct-kpi, .mc-drawer, .djjs-card) { border-radius: var(--r-m); } /* the portal's primary action: one flat vermilion fill, one shadow (no glow, no gold ring) */ html[data-direction="papercut"] #root :is(.glow-amber, .djjs-ah__join) { box-shadow: var(--elev) !important; background: var(--vermilion) !important; animation: none !important; } /* the page's section padding does not apply to the hero: the header band is the card and 24 px above and below */ html[data-direction="papercut"] .dh { padding: 0; } /* one heading style on the public pages: event, card, step and word titles are the heading face too (portal and desks stay in sentence case) */ html[data-direction-surface="public"][data-direction="papercut"] :is(.dp-event__title, .dp-card__t, .dp-step__h, .dp-word > h3, .dp-finding__t, .dp-notice > h3, .dp-split__side > h3, .g-h3) { font-family: var(--display); font-weight: 600; letter-spacing: .01em; } html[data-direction-surface="public"][data-direction="papercut"] .dp-event__title { font-size: var(--t-m); } /* the header band of the portal (88 px) and the desks (64 px): the art is decoration, so it stays quiet under the title */ html[data-direction="papercut"] .dh-band .dh { background: transparent; }