/* * Kinnomy site. One stylesheet for every page, scoped to .hnms. * Colour tokens come from tokens.css (printed inline). Site tokens and the dark theme are below. * Theme: is set before first paint by the boot script in . * Without JavaScript there is no data-theme and the device setting decides (the second dark block). * Motion lives only inside prefers-reduced-motion: no-preference, hover movement only inside hover: hover. */ :root { --ember-deep: #C84821; /* button fill: white bold text on it measures 4.77:1 */ --paper-3: #B5ABA0; /* muted text on night: 8.3:1 */ --field: #8F867C; /* form field borders: 3:1 or better on paper, card and night-2 */ --cream: #FBF7F1; /* always light: text on night surfaces, in both themes */ --char: #1B1714; /* always dark: text on gold and other bright fills */ --gold-ink: #8A6410; --hdr-bg: rgba(251, 247, 241, 0.8); --hdr-bg-2: rgba(251, 247, 241, 0.94); --hover: rgba(27, 23, 20, 0.06); --ghost: rgba(27, 23, 20, 0.28); --tint: #FDF3EC; --tint-2: #FFF8F2; --sug-bg: #FFF1CC; --sug-ink: #5E4400; --bad-bg: #FBECEA; --bad-ink: #8F1D17; --ok-bg: #E6F4EC; --ok-ink: #0F5E3E; --warn-bg: #FFF0EA; --night-line: #2E2621; --night-edge: transparent; --giant: #2A221D; --pop: 0 40px 80px -40px rgba(27, 23, 20, 0.35); --glow: 14%; --glow-gold: rgba(242, 193, 78, 0.12); --cta-end: #15110E; --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%231B1714' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E"); /* Neutral colours inside the inline art (see hnms_art_theme). */ --sv-card: #FFFFFF; --sv-line: #E6DDD1; --sv-line2: #C9BEB1; --sv-ink: #1B1714; --sv-ink2: #4A423B; --sv-ink3: #6B6259; --sv-soft: #F3ECE2; --sv-paper: #FBF7F1; --cv-a: #F3ECE2; --cv-b: #FBF7F1; --cv-line: #E6DDD1; --cv-ink: #1B1714; --wrap: 1240px; --gutter: 16px; --sec: clamp(64px, 8.5vw, 132px); --hdr: 64px; --hdr-c: 58px; color-scheme: light; } @media (min-width: 640px) { :root { --gutter: 24px; } } @media (min-width: 1024px) { :root { --gutter: 40px; --hdr: 76px; --hdr-c: 62px; } } /* The dark theme: one palette, used when chosen or (with no choice saved) when the device is dark. */ html[data-theme="dark"] { color-scheme: dark; --ink: #F6F0E8; --ink-2: #D9CFC3; --ink-3: #AEA395; --paper: #15110E; --paper-2: #1B1612; --card: #221C18; --line: #362D27; --night: #0D0B09; --night-2: #1D1814; --ember-ink: #FF9A78; --people-ink: #B9A6F6; --time-ink: #8CBDF7; --money-ink: #63D6A4; --work-ink: #F7B46C; --memory-ink: #F292BD; --context-ink: #62D5E5; --gold-ink: #F2C14E; --good: #63D6A4; --warn: #F7B46C; --bad: #FF8F85; --field: #857A70; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.28); --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.45); --hdr-bg: rgba(21, 17, 14, 0.78); --hdr-bg-2: rgba(21, 17, 14, 0.92); --hover: rgba(255, 240, 225, 0.07); --ghost: rgba(246, 240, 232, 0.32); --tint: #2C1E17; --tint-2: #2B1F18; --sug-bg: #3A2F12; --sug-ink: #F6D98A; --bad-bg: #3A1A16; --bad-ink: #FFB4AA; --ok-bg: #16322A; --ok-ink: #9BE3C1; --warn-bg: #36201A; --night-line: #2A231E; --night-edge: #332A24; --giant: #1A1511; --pop: 0 40px 80px -30px rgba(0, 0, 0, 0.75); --glow: 18%; --glow-gold: rgba(242, 193, 78, 0.05); --cta-end: #1F1814; --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%23AEA395' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E"); --sv-card: #2B241F; --sv-line: #4A3F37; --sv-line2: #5E5148; --sv-ink: #F6F0E8; --sv-ink2: #D9CFC3; --sv-ink3: #AEA395; --sv-soft: #362E28; --sv-paper: #15110E; --cv-a: #1E1814; --cv-b: #17120F; --cv-line: #2E2621; --cv-ink: #FBF7F1; } @media (prefers-color-scheme: dark) { html:not([data-theme]) { color-scheme: dark; --ink: #F6F0E8; --ink-2: #D9CFC3; --ink-3: #AEA395; --paper: #15110E; --paper-2: #1B1612; --card: #221C18; --line: #362D27; --night: #0D0B09; --night-2: #1D1814; --ember-ink: #FF9A78; --people-ink: #B9A6F6; --time-ink: #8CBDF7; --money-ink: #63D6A4; --work-ink: #F7B46C; --memory-ink: #F292BD; --context-ink: #62D5E5; --gold-ink: #F2C14E; --good: #63D6A4; --warn: #F7B46C; --bad: #FF8F85; --field: #857A70; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.28); --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.45); --hdr-bg: rgba(21, 17, 14, 0.78); --hdr-bg-2: rgba(21, 17, 14, 0.92); --hover: rgba(255, 240, 225, 0.07); --ghost: rgba(246, 240, 232, 0.32); --tint: #2C1E17; --tint-2: #2B1F18; --sug-bg: #3A2F12; --sug-ink: #F6D98A; --bad-bg: #3A1A16; --bad-ink: #FFB4AA; --ok-bg: #16322A; --ok-ink: #9BE3C1; --warn-bg: #36201A; --night-line: #2A231E; --night-edge: #332A24; --giant: #1A1511; --pop: 0 40px 80px -30px rgba(0, 0, 0, 0.75); --glow: 18%; --glow-gold: rgba(242, 193, 78, 0.05); --cta-end: #1F1814; --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%23AEA395' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E"); --sv-card: #2B241F; --sv-line: #4A3F37; --sv-line2: #5E5148; --sv-ink: #F6F0E8; --sv-ink2: #D9CFC3; --sv-ink3: #AEA395; --sv-soft: #362E28; --sv-paper: #15110E; --cv-a: #1E1814; --cv-b: #17120F; --cv-line: #2E2621; --cv-ink: #FBF7F1; } } html.hnms-root { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background-color: var(--paper); } body.hnms-body { margin: 0; background-color: var(--paper); color: var(--ink); } html.hnms-lock, html.hnms-lock body { overflow: hidden; } html.hnms-no-tr *, html.hnms-no-tr *::before, html.hnms-no-tr *::after { transition: none !important; } /* ------------------------------------------------------------------ */ /* Base */ /* ------------------------------------------------------------------ */ .hnms { font-family: var(--font-text); font-size: 17px; line-height: 1.6; color: var(--ink); background-color: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; font-feature-settings: "ss01", "cv11"; } .hnms *, .hnms *::before, .hnms *::after { box-sizing: border-box; } .hnms ::selection { background-color: rgba(228, 87, 46, 0.26); color: inherit; } :where(.hnms) :where(a) { color: inherit; } :where(.hnms) :where(p, ul, ol, figure, blockquote, dl) { margin: 0; } :where(.hnms) :where(img, svg) { max-width: 100%; } :where(.hnms) :where(button, input, select, textarea) { font: inherit; } :where(.hnms) :where(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 600; font-optical-sizing: auto; letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: inherit; } :where(.hnms) :where(p, li) :where(a:not([class])) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } :where(.hnms) :where(em) { font-style: italic; } .hnms [id] { scroll-margin-top: calc(var(--hdr-c) + 20px); } .hnms-ico { width: 24px; height: 24px; flex-shrink: 0; display: inline-block; vertical-align: middle; } .hnms .sr, .hnms .hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .hnms .hp { left: -10000px; } .hnms :focus-visible { outline: 3px solid var(--ember-ink); outline-offset: 3px; } .hnms :where(a:not([class]), summary, .lg a, .ft-col a, .ft-legal a, .toc-list a):focus-visible { border-radius: 6px; } .hnms .tone-night :focus-visible, .hnms .hnms-footer :focus-visible, .hnms .demo-in :focus-visible, .hnms .cta-panel :focus-visible, .hnms .is-feature :focus-visible, .hnms .mega-card:focus-visible { outline-color: var(--gold); } .hnms-skip { position: absolute; left: 16px; top: -120px; z-index: 200; padding: 12px 18px; border-radius: 12px; background-color: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none; } .hnms-skip:focus { top: 12px; } .hnms-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .hnms-main { display: block; outline: none; padding-top: var(--hdr); } /* Type */ .hnms-h1 { font-size: clamp(2.45rem, 1.3rem + 4.2vw, 4.9rem); line-height: 1.02; letter-spacing: -0.032em; margin: 0 0 22px; text-wrap: balance; font-variation-settings: "opsz" 144; } .hnms-h1.is-display { font-size: clamp(2.8rem, 1.2rem + 5.6vw, 6.1rem); line-height: 0.95; letter-spacing: -0.042em; } .hnms-h2 { font-size: clamp(1.95rem, 1.2rem + 2.6vw, 3.5rem); line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 18px; text-wrap: balance; font-variation-settings: "opsz" 144; } .hnms-h3 { font-size: 1.6rem; letter-spacing: -0.02em; } .hnms :is(.hnms-h1, .hnms-h2, .hnms-statement, .cta-panel h2, .cs-title) em { color: var(--a-ink, var(--ember-ink)); font-weight: 500; } .hnms .tone-night :is(.hnms-h2, .hnms-statement) em, .hnms .cta-panel h2 em { color: var(--gold); } .hnms-lead { font-size: clamp(1.08rem, 1rem + 0.42vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 60ch; margin: 0; text-wrap: pretty; } .hnms-kicker { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1.2 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 18px; } .hnms-kicker .k-dot { width: 9px; height: 9px; border-radius: 3px; background-color: var(--a, var(--ember)); transform: rotate(45deg); flex-shrink: 0; } .hnms-head { margin-bottom: clamp(30px, 4vw, 56px); } .hnms-head.is-center { text-align: center; } .hnms-head.is-center .hnms-lead { margin-inline: auto; } .hnms-head .hnms-h2 { max-width: 20ch; } .hnms-head.is-center .hnms-h2 { margin-inline: auto; } /* ------------------------------------------------------------------ */ /* Sections and bands */ /* ------------------------------------------------------------------ */ .hnms-sec { position: relative; padding-block: var(--sec); } .tone-paper { background-color: var(--paper); } .tone-paper2 { background-color: var(--paper-2); } .tone-card { background-color: var(--card); } .tone-night { background-color: var(--night); color: var(--cream); box-shadow: inset 0 1px 0 var(--night-edge), inset 0 -1px 0 var(--night-edge); } .tone-night .hnms-kicker { color: var(--paper-3); } .tone-night .hnms-lead, .tone-night p { color: var(--paper-3); } .tone-night .hnms-h2, .tone-night h3 { color: var(--cream); } .hnms-sec + .hnms-sec.tone-paper.s-notice, .hnms-sec + .hnms-sec.tone-paper.s-cta-band { padding-top: 0; } .s-notice { padding-block: clamp(32px, 4vw, 56px); } .s-marquee { padding-block: 26px; } /* ------------------------------------------------------------------ */ /* Buttons and links */ /* ------------------------------------------------------------------ */ .hnms-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; } .hnms-actions.is-after { margin-top: clamp(28px, 3vw, 44px); } .hnms-actions.is-center { justify-content: center; } .hnms-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1.5px solid transparent; font: 700 16px/1.1 var(--font-text); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; } .hnms-btn .hnms-ico { width: 18px; height: 18px; } .hnms-btn::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background-color: var(--ink); transform: translateX(-102%); } .hnms-btn--primary { color: #FFFFFF; background-color: #C84821; background-image: linear-gradient(135deg, #C84821 0%, #B23C17 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 24px -12px rgba(178, 60, 23, 0.7); } .hnms-btn--ghost { color: var(--ink); background-color: transparent; border-color: var(--ghost); } .hnms-btn--ghost-light, .tone-night .hnms-btn--ghost, .cta-panel .hnms-btn--ghost { color: var(--cream); background-color: transparent; border-color: rgba(251, 247, 241, 0.4); } .hnms-btn--ghost-light::before, .tone-night .hnms-btn--ghost::before, .cta-panel .hnms-btn--ghost::before { background-color: var(--cream); } .hnms-btn.is-sm { min-height: 44px; padding: 0 20px; font-size: 15px; } .hnms-btn.is-wide { width: 100%; } .hnms-arrowlink { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-weight: 700; color: var(--ember-ink); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; } .hnms-arrowlink .hnms-ico { width: 18px; height: 18px; } .tone-night .hnms-arrowlink, .hnms-footer .hnms-arrowlink { color: var(--gold); } @media (hover: hover) { .hnms-btn:hover::before { transform: translateX(0); } .hnms-btn--primary:hover { color: var(--paper); } .hnms-btn--ghost:hover { color: var(--paper); border-color: var(--ink); } .hnms-btn--ghost-light:hover, .tone-night .hnms-btn--ghost:hover, .cta-panel .hnms-btn--ghost:hover { color: var(--char); border-color: var(--cream); } .hnms-btn:hover .hnms-ico, .hnms-arrowlink:hover .hnms-ico { transform: translateX(3px); } } /* ------------------------------------------------------------------ */ /* Header: fixed, condenses on scroll; mega menu; theme; mobile sheet */ /* ------------------------------------------------------------------ */ .hnms-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background-color: var(--hdr-bg); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid transparent; } .hnms-header.is-scrolled { border-bottom-color: var(--line); background-color: var(--hdr-bg-2); box-shadow: 0 10px 30px -24px rgba(0, 0, 0, 0.45); } .admin-bar .hnms-header { top: 32px; } @media (max-width: 782px) { .admin-bar .hnms-header { top: 46px; } } @media (max-width: 600px) { .admin-bar .hnms-header { top: 0; } } .hdr { display: flex; align-items: center; gap: 12px; height: var(--hdr); } .hnms-header.is-scrolled .hdr { height: var(--hdr-c); } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; min-height: 44px; } .brand .hnms-mark { width: 32px; height: 32px; } .hnms-header.is-scrolled .brand .hnms-mark { width: 29px; height: 29px; } .wordmark { font-family: var(--font-display); font-weight: 600; font-size: 23px; letter-spacing: -0.025em; line-height: 1; font-variation-settings: "opsz" 48; } .hdr-nav { display: none; margin-left: 20px; } .nav-list { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; } .nav-item { position: static; } .nav-item.has-drop { position: relative; } .nav-trigger, .nav-link { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 11px 14px; border: 0; border-radius: 999px; background-color: transparent; color: var(--ink); font: 600 15.5px/1 var(--font-text); text-decoration: none; cursor: pointer; } .nav-trigger .hnms-ico { width: 16px; height: 16px; } .nav-item.is-open .nav-trigger .hnms-ico { transform: rotate(180deg); } .nav-trigger:hover, .nav-link:hover, .nav-item.is-open .nav-trigger { background-color: var(--hover); } .nav-item.is-current > .nav-trigger::after, .nav-item.is-current > .nav-link::after, .nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px; background-color: var(--ember); } .nav-item.is-current > .nav-trigger::after { margin-left: -16px; } .hdr-cta { margin-left: auto; display: flex; align-items: center; gap: 8px; } .hdr-cta .signin { display: none; } .burger { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; border: 1.5px solid var(--line); background-color: var(--card); color: var(--ink); cursor: pointer; flex-shrink: 0; } .bg-lines { display: block; width: 20px; } .bg-lines i { display: block; height: 2px; border-radius: 2px; background-color: var(--ink); margin: 4px 0; } .bg-lines i:nth-child(2) { width: 70%; margin-left: auto; } @media (min-width: 1080px) { .hdr-nav { display: block; } .hdr-cta .signin { display: inline-flex; } .burger { display: none; } } @media (max-width: 400px) { .hdr { gap: 8px; } .wordmark { font-size: 21px; } .brand { gap: 8px; } .hdr-cta { gap: 6px; } .hdr-cta .hnms-btn.is-sm { padding: 0 14px; } } @media (max-width: 359px) { .hdr-cta .theme-pick { display: none; } } /* Theme picker (header) */ .theme-pick { position: relative; display: none; } .hnms-js .theme-pick { display: block; } .theme-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line); background-color: transparent; color: var(--ink); cursor: pointer; } .theme-btn:hover, .theme-btn[aria-expanded="true"] { background-color: var(--hover); border-color: var(--field); } .theme-btn .ti { display: none; line-height: 0; } .theme-btn .hnms-ico { width: 20px; height: 20px; } html[data-theme-pref="light"] .theme-btn .ti-light, html[data-theme-pref="dark"] .theme-btn .ti-dark, html[data-theme-pref="system"] .theme-btn .ti-system, html:not([data-theme-pref]) .theme-btn .ti-system { display: block; } .theme-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; width: 236px; padding: 8px; border-radius: 20px; background-color: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-2), var(--pop); } .theme-menu[hidden] { display: none; } .tm-title { padding: 8px 10px 6px; font: 700 12px/1.2 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .tm-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 12px; background-color: transparent; color: var(--ink); font: 600 15px/1.2 var(--font-text); text-align: left; cursor: pointer; } .tm-opt:hover { background-color: var(--hover); } .tm-opt .hnms-ico { width: 20px; height: 20px; } .tm-opt span { flex: 1; } .tm-opt .tm-tick { width: 18px; height: 18px; color: var(--ember-ink); visibility: hidden; stroke-width: 2.4; } .tm-opt[aria-pressed="true"] { background-color: var(--paper-2); } .tm-opt[aria-pressed="true"] .tm-tick { visibility: visible; } [data-panel] { display: none; } .nav-item.is-open > [data-panel] { display: block; } .mega { position: absolute; left: 0; right: 0; top: 100%; padding: 8px var(--gutter) 0; } .mega-inner { max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 0 auto; padding: 28px; display: grid; grid-template-columns: 1.15fr 1.2fr 0.95fr; gap: 32px; background-color: var(--card); border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--shadow-2), var(--pop); } .mega-title { font: 700 12.5px/1.2 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; } .mega ul { list-style: none; margin: 0; padding: 0; } .mega-layers li + li { margin-top: 4px; } .mega-layers a, .dropdown a { display: flex; align-items: center; gap: 14px; padding: 9px 10px; border-radius: 16px; text-decoration: none; color: var(--ink); } .mega-layers a:hover, .dropdown a:hover, .mega-mods a:hover, .mega a[aria-current="page"], .dropdown a[aria-current="page"] { background-color: var(--hover); } .mm-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background-color: var(--a); color: var(--a-on); flex-shrink: 0; } .mm-ico .hnms-ico { width: 21px; height: 21px; } .mm-ico.is-ai { background-color: var(--gold); color: var(--char); } .mm-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; } .mm-txt strong { font-size: 15.5px; } .mm-txt span { font-size: 13.5px; color: var(--ink-3); } .mega-mods ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; } .mega-mods a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; border-radius: 12px; text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink); } .mm-dot { width: 9px; height: 9px; border-radius: 3px; background-color: var(--a); flex-shrink: 0; } .mega-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 22px; background-color: var(--night); color: var(--cream); text-decoration: none; box-shadow: inset 0 0 0 1px var(--night-edge); } .mega-card strong { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; } .mega-card > span:not(.mm-ico):not(.hnms-arrowlink) { color: var(--paper-3); font-size: 14.5px; line-height: 1.45; } .mega-card .hnms-arrowlink { color: var(--gold); align-self: flex-start; margin-top: 6px; } .mega-more { margin-top: 16px !important; display: grid; gap: 2px; } .mega-more a { display: block; padding: 9px 10px; border-radius: 12px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--ink); } .mega-more a:hover { background-color: var(--hover); } .dropdown { position: absolute; top: calc(100% + 14px); left: -8px; width: 400px; padding: 12px; background-color: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-2), var(--pop); } .dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } .dropdown .mm-dot { width: 12px; height: 12px; border-radius: 4px; } .dropdown-all { margin: 10px 10px 6px; } .hnms-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; overflow: hidden; } .hnms-progress i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background-color: #E4572E; background-image: linear-gradient(90deg, #7C5CD6, #2F7FE0, #1E9E6A, #EE8A2A, #C6457E, #16A3B8); } .hnms-sheet { position: fixed; inset: 0; z-index: 120; background-color: var(--paper); overflow-y: auto; overscroll-behavior: contain; } .hnms-sheet[hidden] { display: none; } .sheet-inner { min-height: 100%; display: flex; flex-direction: column; padding: 0 var(--gutter) 32px; } .sheet-top { display: flex; align-items: center; justify-content: space-between; height: var(--hdr); } .sheet-close { width: 46px; height: 46px; border-radius: 14px; border: 1.5px solid var(--line); background-color: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; } .sheet-nav { display: flex; flex-direction: column; margin-top: 8px; } .sheet-link, .sheet-group > summary { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 14px 2px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; cursor: pointer; list-style: none; } .sheet-link[aria-current] { color: var(--ember-ink); } .sheet-group > summary::-webkit-details-marker { display: none; } .sheet-group[open] > summary .hnms-ico { transform: rotate(180deg); } .sheet-sub { list-style: none; margin: 0; padding: 8px 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; border-bottom: 1px solid var(--line); } .sheet-sub a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 4px; font-weight: 600; font-size: 16px; text-decoration: none; color: var(--ink); border-radius: 10px; } .sheet-sub a[aria-current] { background-color: var(--hover); } .sheet-theme { display: none; margin-top: 24px; } .hnms-js .sheet-theme { display: block; } .st-title { font: 700 12.5px/1.2 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; } .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background-color: var(--paper-2); border: 1px solid var(--line); } .seg-opt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 8px; border: 0; border-radius: 12px; background-color: transparent; color: var(--ink-2); font: 700 15px/1 var(--font-text); cursor: pointer; } .seg-opt .hnms-ico { width: 18px; height: 18px; } .seg-opt[aria-pressed="true"] { background-color: var(--card); color: var(--ink); box-shadow: var(--shadow-1); } .sheet-cta { display: grid; gap: 10px; margin-top: 24px; } .sheet-note { margin-top: auto; padding-top: 28px; color: var(--ink-3); font-size: 14px; text-align: center; } /* Back to top */ .to-top { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 55; display: none; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background-color: var(--card); color: var(--ink); box-shadow: var(--shadow-2); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); } .hnms-js .to-top { display: grid; } .to-top.is-on { opacity: 1; visibility: visible; transform: none; } .to-top .hnms-ico { width: 22px; height: 22px; } @media (hover: hover) { .to-top:hover { background-color: var(--ink); color: var(--paper); border-color: var(--ink); } } /* ------------------------------------------------------------------ */ /* Hero */ /* ------------------------------------------------------------------ */ .s-hero { isolation: isolate; overflow: hidden; padding-top: clamp(26px, 5vw, 72px); padding-bottom: clamp(52px, 8vw, 116px); } .s-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(60% 70% at 88% 12%, color-mix(in srgb, var(--a, #E4572E) var(--glow), transparent), transparent 70%), radial-gradient(40% 50% at 0% 100%, var(--glow-gold), transparent 70%); pointer-events: none; } .hero-grid { display: grid; gap: 36px; align-items: center; } .hero-copy { min-width: 0; } .hero-page .hero-grid:not(.has-media) .hero-copy { max-width: 920px; } .hero-lead { max-width: 56ch; } .hero-note { margin-top: 16px; font-size: 14.5px; color: var(--ink-3); } .hero-meta { margin-top: 20px; color: var(--ink-3); font-size: 15px; } .hero-media { min-width: 0; } .hero-media .hnms-media-art svg { display: block; width: 100%; height: auto; } .hero-home .hero-media { margin-inline: -8px; } .hero-layer .hero-media { max-width: 600px; justify-self: center; width: 100%; } .hnms-stats { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; margin: 36px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); max-width: 560px; } .hnms-stats li { display: flex; flex-direction: column; gap: 4px; } .hnms-stats .num { font-family: var(--font-display); font-weight: 600; font-size: 2.6rem; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .hnms-stats span { font-size: 14px; color: var(--ink-3); font-weight: 600; } @media (min-width: 560px) { .hnms-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 559px) { .hnms-stats { gap: 16px 20px; } .hnms-stats .num { font-size: 2.2rem; } } @media (min-width: 960px) { .hero-grid.has-media { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 56px; } .hero-home .hero-grid.has-media { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 40px; } } @media (max-width: 959px) { .hero-home .hero-media { max-width: 520px; width: 100%; justify-self: center; margin-inline: auto; } .hero-page .hero-media { max-width: 460px; width: 100%; justify-self: center; } } .hnms-crumbs { margin-bottom: 26px; } .hnms-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 0; margin: 0; font-size: 14px; color: var(--ink-3); } .hnms-crumbs li { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; } .hnms-crumbs li + li::before { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); } .hnms-crumbs a { color: var(--ink-2); text-decoration: none; font-weight: 600; padding: 4px 0; } .hnms-crumbs a:hover { text-decoration: underline; } .hnms-crumbs [aria-current] { color: var(--ink-3); } /* SVG art text */ .hnms-art .t-ui { font-family: var(--font-text); font-weight: 500; } .hnms-art .t-strong { font-weight: 700; } .hnms-art .t-display { font-family: var(--font-display); font-weight: 600; } .hnms-art { display: block; width: 100%; height: auto; overflow: visible; } /* ------------------------------------------------------------------ */ /* Marquee and statement */ /* ------------------------------------------------------------------ */ .hnms-marquee { overflow: hidden; contain: paint; } .mq-track { display: block; } .mq-row { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; margin: 0; padding: 0 var(--gutter); } .mq-dup { display: none; } .mq-item { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 0.9rem + 1.3vw, 2.1rem); letter-spacing: -0.02em; color: var(--paper-3); } .mq-item .hnms-ico { width: 26px; height: 26px; color: var(--paper-3); } .mq-item s { text-decoration-thickness: 2px; text-decoration-color: var(--ember); } .mq-one { color: var(--cream); } .mq-one span { font-style: italic; } .statement-grid { display: grid; gap: 44px; align-items: center; } .hnms-statement { font-size: clamp(2.15rem, 1.1rem + 3.7vw, 4.3rem); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 26px; max-width: 17ch; text-wrap: balance; font-variation-settings: "opsz" 144; } .statement-copy .hnms-lead { max-width: 56ch; } @media (min-width: 1024px) { .statement-grid.has-stack { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; } } /* The problem, drawn as before and after: nothing overlaps at any point of the animation. */ .hnms-stack { position: relative; display: grid; gap: 14px; justify-items: center; padding: clamp(20px, 3vw, 32px); border-radius: 30px; background-color: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); } .st-before { width: 100%; } .st-label { margin: 0 0 12px; text-align: center; font: 700 12px/1.2 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .st-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px; } .st-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 11px; border-radius: 12px; background-color: var(--paper); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; transform: rotate(var(--r, 0deg)); } .st-chip .hnms-ico { width: 18px; height: 18px; color: var(--ink-3); } .st-chip span { position: relative; } .st-chip span::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; border-radius: 2px; background-color: var(--ember); transform-origin: 0 50%; } .st-arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--paper-2); color: var(--ember-ink); } .st-arrow .hnms-ico { width: 20px; height: 20px; } .st-one { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 18px 20px; border-radius: 22px; background-color: var(--night); color: var(--cream); box-shadow: inset 0 0 0 1px var(--night-edge), 0 24px 48px -24px rgba(21, 17, 14, 0.6); } .st-mark .hnms-mark { display: block; width: 44px; height: 44px; } .st-name { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .st-one strong { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; } .st-one em { color: var(--paper-3); font-size: 14.5px; } .st-tiles { display: grid; grid-template-columns: repeat(3, 12px); gap: 4px; } .st-tiles i { display: block; width: 12px; height: 12px; border-radius: 4px; background-color: var(--c); } @media (max-width: 420px) { .st-chip { font-size: 13.5px; padding: 8px 12px 8px 10px; } .st-one { grid-template-columns: auto minmax(0, 1fr); } .st-tiles { display: none; } } /* ------------------------------------------------------------------ */ /* Layer grid */ /* ------------------------------------------------------------------ */ .hnms-layers { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .hnms-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .hnms-layers { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .layer-tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 320px; padding: 26px 26px 28px; border-radius: 30px; background-color: var(--a); color: var(--a-on); } .layer-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(380px circle at var(--mx, 80%) var(--my, 0%), rgba(255, 255, 255, 0.22), transparent 62%); opacity: 0.6; pointer-events: none; } .layer-tile::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; z-index: -1; border-radius: 48px; border: 2px solid currentColor; opacity: 0.12; transform: rotate(18deg); pointer-events: none; } .lt-top { display: flex; align-items: center; justify-content: space-between; } .lt-num { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; } .lt-ico { width: 34px; height: 34px; } .lt-name { font-size: clamp(2.1rem, 1.6rem + 1.3vw, 2.75rem); letter-spacing: -0.035em; margin: 44px 0 6px; } .lt-q { font-family: var(--font-display); font-style: italic; font-size: 1.22rem; margin: 0 0 20px; line-height: 1.3; } .lt-mods { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 56px 0 0; margin: auto 0 0; } .lt-mods li { font-size: 13.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1.5px solid currentColor; line-height: 1.3; } .lt-go { position: absolute; right: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background-color: var(--a-on); color: var(--a); } .lt-go .hnms-ico { width: 20px; height: 20px; } .card-link { text-decoration: none; } .card-link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; } .card-link:focus-visible { outline: none; } .card-link:focus-visible::after { outline: 3px solid var(--ember-ink); outline-offset: 3px; } .layer-tile .card-link:focus-visible::after { outline-color: var(--ink); } .is-compact .layer-tile { min-height: 230px; } .is-compact .lt-mods { display: none; } .is-compact .lt-name { margin-top: 28px; } @media (max-width: 639px) { .layer-tile { min-height: 0; padding: 22px 22px 24px; border-radius: 26px; } .lt-name { margin-top: 22px; font-size: 2rem; } .lt-q { font-size: 1.12rem; margin-bottom: 16px; } .lt-mods li { font-size: 13px; padding: 4px 10px; } .lt-go { right: 18px; bottom: 18px; width: 40px; height: 40px; } } .layer-ai { display: grid; gap: 16px; margin-top: 16px; padding: 24px 28px; border-radius: 26px; background-color: var(--night); color: var(--cream); box-shadow: inset 0 0 0 1px var(--night-edge); } .la-copy { display: flex; gap: 16px; align-items: flex-start; } .la-ico { width: 30px; height: 30px; color: var(--gold); margin-top: 2px; } .layer-ai p { color: var(--paper-3); font-size: 16px; } .layer-ai strong { color: var(--cream); } .layer-ai a { color: var(--cream); font-weight: 700; } @media (min-width: 1024px) { .layer-ai { grid-template-columns: 1.6fr 1fr; align-items: center; } } /* ------------------------------------------------------------------ */ /* Cards */ /* ------------------------------------------------------------------ */ .hnms-cards { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 720px) { .hnms-cards.cols-2, .hnms-cards.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hnms-cards.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .hnms-cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hnms-cards.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .hnms-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 26px; background-color: var(--card); border: 1px solid var(--line); } .tone-card .hnms-card { background-color: var(--paper); } .hnms-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(360px circle at var(--mx, 50%) var(--my, -20%), color-mix(in srgb, var(--a, #E4572E) 12%, transparent), transparent 65%); opacity: 0; pointer-events: none; } .card-ico { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background-color: var(--a, var(--paper-2)); color: var(--a-on, var(--ink)); flex-shrink: 0; } .hnms-card:not(.has-color) .card-ico { background-color: var(--paper-2); color: var(--ink); } .card-title { font-size: 1.42rem; line-height: 1.18; letter-spacing: -0.02em; margin: 6px 0 0; } .card-text { color: var(--ink-2); font-size: 16px; line-height: 1.55; } .card-more { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--ember-ink); } .card-more .hnms-ico { width: 18px; height: 18px; } .card-tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); background-color: var(--paper-2); padding: 5px 10px; border-radius: 999px; } .card-num { font-family: var(--font-display); font-weight: 600; font-size: 3.2rem; line-height: 1; letter-spacing: -0.04em; color: var(--ember-ink); } .cards-numbered .hnms-card { background-color: var(--card); } .card-art { margin: -26px -26px 10px; background-color: var(--paper-2); border-bottom: 1px solid var(--line); overflow: hidden; } .card-art .hnms-art { display: block; width: 100%; height: auto; } .cards-art .card-art { margin: -14px -14px 8px; background-color: transparent; border-bottom: 0; } .cards-posts .card-art { aspect-ratio: 16 / 9; } .cards-posts .card-art svg { height: 100%; } .cards-compact .hnms-card { padding: 22px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .cards-compact .card-ico { width: 42px; height: 42px; border-radius: 12px; } .cards-compact .card-ico .hnms-ico { width: 20px; height: 20px; } .cards-compact .card-title { font-size: 1.15rem; margin: 0; flex: 1; min-width: 60%; } .cards-compact .card-text { flex-basis: 100%; font-size: 15px; } .cards-compact .card-more { display: none; } @media (max-width: 719px) { .hnms-cards:not(.cards-art):not(.cards-posts) .hnms-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start; padding: 20px; border-radius: 22px; } .hnms-cards:not(.cards-art):not(.cards-posts) .hnms-card > * { grid-column: 2; } .hnms-cards:not(.cards-art):not(.cards-posts) .hnms-card > .card-ico, .hnms-cards:not(.cards-art):not(.cards-posts) .hnms-card > .card-num { grid-column: 1; grid-row: 1 / span 4; width: 44px; height: 44px; border-radius: 13px; } .hnms-cards:not(.cards-art):not(.cards-posts) .hnms-card > .card-num { font-size: 2rem; height: auto; } .hnms-cards:not(.cards-art):not(.cards-posts) .card-title { margin-top: 0; font-size: 1.25rem; } .hnms-cards:not(.cards-art):not(.cards-posts) .card-more { padding-top: 6px; } .hnms-cards:not(.cards-art):not(.cards-posts) .card-ico .hnms-ico { width: 22px; height: 22px; } .hnms-cards:not(.cards-art):not(.cards-posts) .card-text { font-size: 15.5px; } .cards-art .hnms-card { padding: 20px; } .cards-art .card-art { margin: -8px -8px 6px; } } @media (max-width: 559px) { .cards-art .hnms-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: start; padding: 14px 16px 16px 14px; border-radius: 22px; } .cards-art .hnms-card > * { grid-column: 2; } .cards-art .card-art { grid-column: 1; grid-row: 1 / span 4; margin: 0; border-radius: 16px; align-self: stretch; display: grid; place-items: center; background-color: var(--paper-2); } .cards-art .card-art .hnms-art { width: 132%; max-width: none; margin: -12% -16%; } .cards-art .card-title { margin-top: 4px; font-size: 1.2rem; } .cards-art .card-text { font-size: 15px; } .cards-art .card-more { padding-top: 6px; } .hero-layer .hero-media { margin-inline: -10px; width: auto; } } /* ------------------------------------------------------------------ */ /* Split, bullets, notices */ /* ------------------------------------------------------------------ */ .split { display: grid; gap: 36px; align-items: center; } .split-copy { min-width: 0; } .split-copy .hnms-h2 { max-width: 18ch; } .split-text { color: var(--ink-2); font-size: 18px; line-height: 1.65; max-width: 62ch; } .split-text p + p { margin-top: 1em; } .split-text a { color: var(--ember-ink); } .split-media { min-width: 0; } .split-media .hnms-media-art svg { display: block; width: 100%; height: auto; } .split.no-media .split-copy { max-width: 760px; } @media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } .split.no-media { grid-template-columns: minmax(0, 1fr); } .split.is-reverse .split-media { order: -1; } } @media (max-width: 959px) { .split-media { max-width: 480px; width: 100%; justify-self: center; } .split-text { font-size: 17px; } } .hnms-bullets { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; } .hnms-bullets li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--ink); font-size: 16.5px; line-height: 1.5; } .b-ico { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background-color: var(--a, var(--ember)); color: var(--a-on, #15110E); stroke-width: 2.6; margin-top: 1px; } .hnms-bullets.is-small li { font-size: 15px; grid-template-columns: 22px minmax(0, 1fr); } .hnms-bullets.is-small .b-ico { width: 22px; height: 22px; } .hnms-limit { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 16px 18px; border-radius: 16px; border: 1.5px dashed var(--field); color: var(--ink-2); font-size: 15.5px; } .hnms-limit .hnms-ico { width: 20px; height: 20px; color: var(--ink-2); margin-top: 2px; } .hnms-shot { margin: 0; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-2); background-color: var(--card); } .hnms-shot img { display: block; width: 100%; height: auto; } .hnms-notice { display: flex; gap: 16px; align-items: flex-start; max-width: 940px; padding: 22px 24px; border-radius: 22px; background-color: var(--card); border: 1px solid var(--line); } .hnms-notice > .hnms-ico { color: var(--time-ink); margin-top: 1px; } .hnms-notice.is-warn > .hnms-ico { color: var(--warn); } .hnms-notice p { color: var(--ink-2); font-size: 16px; } .hnms-notice .n-title { color: var(--ink); font-weight: 700; margin-bottom: 4px; font-size: 16.5px; } .hnms-notice a { color: var(--ember-ink); } .tone-card .hnms-notice { background-color: var(--paper); } /* ------------------------------------------------------------------ */ /* Steps, bento, timeline */ /* ------------------------------------------------------------------ */ .hnms-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); counter-reset: none; } .step { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 26px; background-color: var(--card); border: 1px solid var(--line); } .step-num { font-family: var(--font-display); font-weight: 600; font-size: 3.4rem; line-height: 0.9; letter-spacing: -0.04em; color: var(--ember-ink); } .step-title { font-size: 1.3rem; margin-bottom: 6px; } .step p { color: var(--ink-2); font-size: 15.5px; } @media (max-width: 639px) { .step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 20px; border-radius: 22px; } .step-num { font-size: 2.4rem; } } .hnms-bento { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 720px) { .hnms-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento-item.b-wide { grid-column: span 2; } } @media (min-width: 1024px) { .hnms-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .bento-item { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 230px; padding: 28px; border-radius: 28px; background-color: var(--card); border: 1px solid var(--line); } .bento-item.is-fill { background-color: var(--a); color: var(--a-on); border-color: transparent; } .bento-item.is-fill p { color: var(--a-on); } .bento-item .bento-big { font-family: var(--font-display); font-weight: 600; font-size: clamp(3.4rem, 2rem + 4vw, 6.2rem); line-height: 0.9; letter-spacing: -0.05em; margin-bottom: auto; } .bento-title { font-size: 1.4rem; margin: 22px 0 8px; } .bento-item p { color: var(--ink-2); font-size: 15.5px; } .bento-item .card-ico { background-color: var(--a); color: var(--a-on); } @media (max-width: 719px) { .bento-item { min-height: 0; padding: 22px; border-radius: 24px; } .bento-item .bento-big { margin-bottom: 8px; } .bento-title { margin-top: 16px; } .bento-item:not(.is-fill) { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start; padding: 20px; border-radius: 22px; } .bento-item:not(.is-fill) > * { grid-column: 2; } .bento-item:not(.is-fill) > .card-ico { grid-column: 1; grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 13px; } .bento-item:not(.is-fill) .bento-title { margin: 0 0 4px; font-size: 1.25rem; } } .hnms-timeline { list-style: none; margin: 0; padding: 0; position: relative; max-width: 900px; } .hnms-timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background-color: var(--line); } .tl-item { position: relative; padding: 0 0 36px 48px; } .tl-item::before { content: ""; position: absolute; left: 3px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background-color: var(--ember); box-shadow: 0 0 0 5px var(--paper); } .tone-paper2 .tl-item::before { box-shadow: 0 0 0 5px var(--paper-2); } .tl-label { font: 700 13px/1.3 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember-ink); margin-bottom: 8px; } .tl-title { font-size: 1.55rem; margin-bottom: 8px; } .tl-body p { color: var(--ink-2); max-width: 64ch; } .tl-body .hnms-bullets { margin-top: 16px; } /* ------------------------------------------------------------------ */ /* FAQ */ /* ------------------------------------------------------------------ */ .faq-grid { display: grid; gap: 26px; } @media (min-width: 960px) { .faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; } .faq-side { position: sticky; top: calc(var(--hdr-c) + 32px); align-self: start; } } .faq-note { color: var(--ink-2); margin-top: -22px; } .faq-note a { color: var(--ember-ink); } .hnms-faq { border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; line-height: 1.3; letter-spacing: -0.01em; border-radius: 6px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-pm { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--field); display: grid; place-items: center; flex-shrink: 0; } .faq-pm .hnms-ico { width: 18px; height: 18px; } .faq-item[open]:not(.is-closing) .faq-pm { background-color: var(--ink); border-color: var(--ink); color: var(--paper); transform: rotate(45deg); } .faq-a { overflow: hidden; } .faq-a p { color: var(--ink-2); padding: 0 0 22px; max-width: 64ch; font-size: 16.5px; } @media (max-width: 639px) { .faq-item summary { font-size: 1.1rem; gap: 14px; } .faq-pm { width: 34px; height: 34px; } .faq-a p { font-size: 16px; } } /* ------------------------------------------------------------------ */ /* Pricing */ /* ------------------------------------------------------------------ */ .price-toggle { display: flex; width: max-content; max-width: 100%; margin: 0 auto 40px; padding: 5px; border-radius: 999px; background-color: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); } .pt-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background-color: transparent; color: var(--ink-2); font: 700 15px/1 var(--font-text); cursor: pointer; } .pt-btn.is-on { background-color: var(--ink); color: var(--paper); } .pt-save { font-size: 12px; padding: 4px 8px; border-radius: 999px; background-color: var(--gold); color: var(--char); } .hnms-prices { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: stretch; } @media (min-width: 960px) { .hnms-prices { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .price-card { position: relative; display: flex; flex-direction: column; padding: 32px 30px; border-radius: 30px; background-color: var(--card); border: 1px solid var(--line); } .price-card.is-feature { background-color: var(--night); color: var(--cream); border-color: var(--night); box-shadow: inset 0 0 0 1px var(--night-edge), 0 34px 64px -32px rgba(21, 17, 14, 0.7); } .pc-badge { position: absolute; top: -14px; left: 28px; padding: 6px 12px; border-radius: 999px; background-color: var(--gold); color: var(--char); font-weight: 700; font-size: 13px; } .pc-name { font-size: 1.7rem; } .pc-for { color: var(--ink-2); margin-top: 6px; font-size: 15.5px; } @media (min-width: 960px) { .pc-for { min-height: 3.1em; } } .is-feature .pc-for, .is-feature .pc-per, .is-feature .pc-alt { color: var(--paper-3); } .pc-price { display: flex; align-items: baseline; gap: 10px; margin: 24px 0 4px; } .pc-amt { font-family: var(--font-display); font-weight: 600; font-size: 4.2rem; line-height: 0.95; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; } .pc-per { color: var(--ink-3); font-weight: 600; } .pc-alt { color: var(--ink-3); font-size: 14.5px; min-height: 1.5em; } .pc-who { display: flex; align-items: center; gap: 10px; margin: 18px 0 22px; padding: 12px 14px; border-radius: 14px; background-color: var(--paper-2); font-weight: 600; font-size: 15px; } .pc-who .hnms-ico { width: 20px; height: 20px; } .is-feature .pc-who { background-color: var(--night-2); color: var(--cream); } .pc-cta { width: 100%; } .pc-lead { font-weight: 700; font-size: 14.5px; margin: 26px 0 0; } .price-card .hnms-bullets { margin-top: 14px; } .is-feature .hnms-bullets li { color: var(--cream); } .is-feature .b-ico { background-color: var(--gold); color: var(--char); } .is-feature .hnms-btn--primary::before { background-color: var(--cream); } @media (hover: hover) { .is-feature .hnms-btn--primary:hover { color: var(--char); } } .price-note { display: flex; gap: 12px; align-items: flex-start; max-width: 780px; margin: 34px auto 0; color: var(--ink-2); font-size: 16px; } .price-note .hnms-ico { color: var(--ember-ink); width: 22px; height: 22px; margin-top: 1px; } @media (max-width: 959px) { .price-card.is-feature { margin-top: 8px; } } @media (max-width: 639px) { .price-toggle { margin-bottom: 32px; } .price-card { padding: 28px 22px 24px; border-radius: 26px; } .pc-amt { font-size: 3.6rem; } .pc-badge { left: 22px; } } /* ------------------------------------------------------------------ */ /* Table (wide: a scrolling table; phones: plan names pinned, rows stacked) */ /* ------------------------------------------------------------------ */ .hnms-table-wrap { overflow-x: auto; contain: paint; border-radius: 26px; border: 1px solid var(--line); background-color: var(--card); -webkit-overflow-scrolling: touch; } .hnms-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15.5px; } .hnms-table th, .hnms-table td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .hnms-table tbody tr:last-child > * { border-bottom: 0; } .hnms-table thead th { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; background-color: var(--paper); } .hnms-table thead th.is-feature { background-color: var(--night); color: var(--cream); } .hnms-table tbody th { font-weight: 600; color: var(--ink); width: 34%; } .hnms-table td { color: var(--ink-2); } .hnms-table td.is-feature { background-color: var(--tint); color: var(--ink); } .cell-yes .hnms-ico { color: var(--money-ink); width: 22px; height: 22px; stroke-width: 2.4; } .cell-no .hnms-ico { color: var(--ink-3); width: 20px; height: 20px; } .table-note { margin-top: 16px; color: var(--ink-3); font-size: 14.5px; max-width: 90ch; } .table-note a { color: var(--ember-ink); } .table-hint { display: none; margin: 0 0 12px; color: var(--ink-3); font-size: 14px; } @media (min-width: 1024px) { .hnms-table tbody tr:hover > * { background-color: var(--hover); } .hnms-table tbody tr:hover > td.is-feature { background-color: var(--tint); } /* Wide screens: the plan names stay pinned under the header while the table scrolls by. */ .hnms-table-wrap.is-stack { overflow: visible; contain: none; } .is-stack .hnms-table thead th { position: sticky; top: var(--hdr-c); z-index: 3; box-shadow: 0 1px 0 var(--line); } .is-stack .hnms-table thead th:first-child { border-top-left-radius: 25px; } .is-stack .hnms-table thead th:last-child { border-top-right-radius: 25px; } .is-stack .hnms-table tbody tr:last-child > :first-child { border-bottom-left-radius: 25px; } .is-stack .hnms-table tbody tr:last-child > :last-child { border-bottom-right-radius: 25px; } } @media (max-width: 859px) { .table-hint { display: block; } .hnms-table-wrap:not(.is-stack) .hnms-table tbody th, .hnms-table-wrap:not(.is-stack) .hnms-table thead th:first-child { position: sticky; left: 0; z-index: 1; background-color: var(--card); box-shadow: 1px 0 0 var(--line); } .hnms-table-wrap:not(.is-stack) .hnms-table thead th:first-child { background-color: var(--paper); } .hnms-table-wrap:not(.is-stack) .hnms-table tbody th { width: 150px; min-width: 150px; } } @media (min-width: 760px) and (max-width: 859px) { .table-hint.is-wide-only { display: block; } } @media (max-width: 759px) { .table-hint.is-wide-only { display: none; } .hnms-table-wrap.is-stack { overflow: visible; contain: none; border: 0; border-radius: 0; background-color: transparent; } .is-stack .hnms-table { display: block; min-width: 0; font-size: 15px; } .is-stack .hnms-table thead { display: block; position: sticky; top: calc(var(--hdr-c) + 8px); z-index: 5; } .is-stack .hnms-table thead tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 18px; background-color: var(--hdr-bg-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: var(--shadow-2); } .is-stack .hnms-table thead th { padding: 10px 4px; border: 0; border-radius: 12px; text-align: center; font-size: 1rem; line-height: 1.15; background-color: var(--card); } .is-stack .hnms-table thead th:first-child { display: none; } .is-stack .hnms-table thead th.is-feature { background-color: var(--night); color: var(--cream); } .is-stack .hnms-table tbody { display: block; margin-top: 8px; } .is-stack .hnms-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--line); } .is-stack .hnms-table tbody tr:last-child { border-bottom: 0; } .is-stack .hnms-table tbody th { grid-column: 1 / -1; width: auto; padding: 0 2px 4px; border: 0; font-size: 15.5px; line-height: 1.35; background-color: transparent; } .is-stack .hnms-table td { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 6px; border: 0; border-radius: 12px; text-align: center; font-size: 14px; line-height: 1.3; background-color: var(--card); } .is-stack .hnms-table td.is-feature { background-color: var(--tint); } .is-stack .hnms-table .row-group th { grid-column: 1 / -1; } } /* ------------------------------------------------------------------ */ /* Links, prose, article */ /* ------------------------------------------------------------------ */ .hnms-linkgroups { display: grid; gap: 32px 28px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .hnms-linkgroups { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .hnms-linkgroups { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .lg-title { font-size: 1.25rem; margin-bottom: 12px; } .lg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .lg a { display: inline-block; padding: 3px 0; font-weight: 600; text-decoration: none; color: var(--ink); } .lg a:hover { text-decoration: underline; } .lg li span { display: block; color: var(--ink-3); font-size: 14px; margin-top: 0; } .prose-grid { display: grid; gap: 24px; } @media (min-width: 1024px) { .prose-grid.has-toc { grid-template-columns: 236px minmax(0, 38rem); gap: 80px; justify-content: center; } } .prose-toc { min-width: 0; } .toc-title { font: 700 12.5px/1.2 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; } .toc-toggle { display: none; } .toc-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); counter-reset: toc; } .toc-list a { display: block; margin-left: -2px; padding: 7px 0 7px 14px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; font-size: 15px; line-height: 1.35; } .toc-list a:hover, .toc-list a.is-active { color: var(--ink); border-left-color: var(--ember); } .toc-list a.is-active { font-weight: 600; } @media (min-width: 1024px) { .prose-toc { position: sticky; top: calc(var(--hdr-c) + 32px); align-self: start; max-height: calc(100vh - var(--hdr-c) - 64px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; } } @media (max-width: 1023px) { .hnms-js .prose-toc { position: relative; border: 1px solid var(--line); border-radius: 18px; background-color: var(--card); } .hnms-js .prose-toc .toc-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; } .hnms-js .toc-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 0 18px; border: 0; border-radius: 18px; background-color: transparent; color: var(--ink); font: 700 15.5px/1.2 var(--font-text); text-align: left; cursor: pointer; } .hnms-js .toc-toggle .tt-l { flex: 1; } .hnms-js .toc-toggle .tt-n { color: var(--ink-3); font-weight: 600; font-size: 14px; } .hnms-js .toc-toggle .hnms-ico { width: 18px; height: 18px; } .hnms-js .toc-toggle[aria-expanded="true"] .hnms-ico { transform: rotate(180deg); } .hnms-js .toc-list { display: none; margin: 0 18px 16px; } .hnms-js .prose-toc.is-open .toc-list { display: block; } .prose-toc { padding: 0; } html:not(.hnms-js) .prose-toc { padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; background-color: var(--card); } } .hnms-prose { max-width: 38rem; margin-inline: auto; font-size: 18px; line-height: 1.72; color: var(--ink); min-width: 0; } .prose-grid.has-toc .hnms-prose { margin-inline: 0; } .hnms-prose > .hnms-h2 { margin-bottom: 28px; } .hnms-prose h2 { font-size: clamp(1.65rem, 1.3rem + 1.1vw, 2.2rem); line-height: 1.15; letter-spacing: -0.025em; margin: 2em 0 0.6em; scroll-margin-top: calc(var(--hdr-c) + 24px); text-wrap: balance; } .hnms-prose .h-anchored { position: relative; margin: 2em 0 0.6em; } .hnms-prose .h-anchored h2 { margin: 0; padding-right: 40px; } .hnms-prose > .h-anchored:first-child { margin-top: 0; } .h-anchor { position: absolute; right: 0; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; margin-top: -18px; border-radius: 10px; color: var(--ink-3); text-decoration: none; opacity: 0.55; } .h-anchor .hnms-ico { width: 18px; height: 18px; } .h-anchor:hover, .h-anchor:focus-visible, .h-anchored:hover .h-anchor { opacity: 1; color: var(--ember-ink); background-color: var(--hover); } .hnms-prose h3 { font-size: 1.35rem; margin: 1.8em 0 0.5em; } .hnms-prose > :first-child, .hnms-prose > h2:first-child { margin-top: 0; } .hnms-prose p, .hnms-prose ul, .hnms-prose ol { margin: 0 0 1.15em; } .hnms-prose ul, .hnms-prose ol { padding-left: 1.3em; } .hnms-prose li { margin: 0.4em 0; } .hnms-prose li::marker { color: var(--ember-ink); font-weight: 700; } .hnms-prose a { color: var(--ember-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } .hnms-prose strong { font-weight: 700; } .hnms-prose blockquote { margin: 1.6em 0; padding: 22px 26px; border-left: 4px solid var(--ember); border-radius: 0 18px 18px 0; background-color: var(--paper-2); } .hnms-prose blockquote p { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.45; font-style: italic; margin: 0; } .hnms-prose img { max-width: 100%; height: auto; border-radius: 18px; } .hnms-prose figure { margin: 1.8em 0; } .hnms-prose figcaption { font-size: 14.5px; color: var(--ink-3); margin-top: 8px; } .hnms-prose code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88em; padding: 0.1em 0.4em; border-radius: 6px; background-color: var(--paper-2); border: 1px solid var(--line); } .hnms-prose pre { overflow-x: auto; padding: 18px; border-radius: 16px; background-color: var(--night); color: var(--cream); font-size: 15px; box-shadow: inset 0 0 0 1px var(--night-edge); } .hnms-prose pre code { padding: 0; border: 0; background: none; color: inherit; } .hnms-prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 16px; display: block; overflow-x: auto; contain: paint; } .hnms-prose th, .hnms-prose td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; } .hnms-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; } .hnms-prose .wp-block-image, .hnms-prose .wp-block-embed { margin: 1.8em 0; } .hnms-prose iframe, .hnms-prose video { max-width: 100%; } @media (max-width: 639px) { .hnms-prose { font-size: 17px; line-height: 1.7; } } .s-article-head { padding-top: clamp(26px, 5vw, 64px); padding-bottom: 20px; } .art-h1 { max-width: 22ch; font-size: clamp(2.2rem, 1.3rem + 3.5vw, 4.5rem); } .art-dek { font-size: clamp(1.12rem, 1rem + 0.5vw, 1.38rem); color: var(--ink-2); max-width: 58ch; line-height: 1.5; } .art-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 20px; color: var(--ink-3); font-size: 15px; } .art-cover { margin-top: 34px; border-radius: 30px; overflow: hidden; aspect-ratio: 16 / 9; background-color: var(--paper-2); border: 1px solid var(--line); } @media (min-width: 1024px) { .art-cover { aspect-ratio: 21 / 9; } } .art-cover svg, .art-cover img { display: block; width: 100%; height: 100%; object-fit: cover; } .s-article-body { padding-top: clamp(28px, 4vw, 56px); } .art-main { min-width: 0; } .is-article-grid:not(.has-toc) .art-main { max-width: 38rem; margin-inline: auto; width: 100%; } .art-end { max-width: 38rem; margin: 52px 0 0; padding: 28px; border-radius: 26px; background-color: var(--card); border: 1px solid var(--line); } .is-article-grid:not(.has-toc) .art-end { margin-inline: auto; } .ae-title { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; } .art-end > p:not(.ae-title) { color: var(--ink-2); } .art-end .hnms-actions { margin-top: 20px; } /* ------------------------------------------------------------------ */ /* CTA band */ /* ------------------------------------------------------------------ */ .s-cta-band { padding-block: clamp(44px, 7vw, 104px); } .cta-panel { position: relative; isolation: isolate; overflow: hidden; border-radius: 38px; padding: clamp(32px, 6vw, 84px); background-color: #3A2317; background-image: radial-gradient(120% 150% at 100% 0%, #3A2317 0%, var(--cta-end) 58%); color: var(--cream); box-shadow: inset 0 0 0 1px var(--night-edge); } .cta-art { position: absolute; right: -70px; bottom: -110px; z-index: -1; opacity: 0.18; transform: rotate(-10deg); pointer-events: none; } .cta-art .hnms-mark { width: 440px; height: 440px; } .cta-copy { max-width: 720px; } .cta-panel .hnms-kicker { color: var(--paper-3); } .cta-panel .hnms-h2 { color: var(--cream); max-width: 16ch; } .cta-panel .hnms-lead { color: var(--paper-3); } @media (hover: hover) { .cta-panel .hnms-btn--primary:hover { color: var(--char); } .cta-panel .hnms-btn--primary::before { background-color: var(--cream); } } @media (max-width: 639px) { .cta-panel { border-radius: 30px; } .cta-art { right: -120px; bottom: -150px; } .cta-panel .hnms-actions .hnms-btn { flex: 1 1 auto; } } .cta-slim { display: grid; gap: 18px 32px; align-items: center; padding: clamp(24px, 3.5vw, 36px); border-radius: 28px; background-color: var(--card); border: 1px solid var(--line); } .cta-slim .hnms-kicker { margin-bottom: 10px; } .cs-title { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; } .cs-text { color: var(--ink-2); margin-top: 8px; max-width: 58ch; } .cta-slim .hnms-actions { margin-top: 0; } @media (min-width: 900px) { .cta-slim { grid-template-columns: minmax(0, 1fr) auto; } } /* ------------------------------------------------------------------ */ /* Flow, promise, automations, modules, KPIs, compare */ /* ------------------------------------------------------------------ */ .flow-fig { margin: 0; } .hnms-flow .flow-h { display: none; } .hnms-flow .flow-v { max-width: 440px; margin-inline: auto; } @media (min-width: 900px) { .hnms-flow .flow-h { display: block; } .hnms-flow .flow-v { display: none; } } .flow-fig figcaption { text-align: center; color: var(--ink-3); font-size: 15px; margin-top: 18px; } .promise-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .promise-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .promise { padding: 26px 22px 28px; border-radius: 24px; background-color: var(--night-2); border: 1px solid var(--night-line); } .pr-ico { width: 38px; height: 38px; color: var(--gold); } .promise h3 { font-size: 1.32rem; color: var(--cream); margin: 20px 0 8px; } .promise p { color: var(--paper-3); font-size: 15.5px; line-height: 1.5; } @media (max-width: 639px) { .promise-grid { gap: 10px; } .promise { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; padding: 18px 18px 20px; border-radius: 20px; } .promise .pr-ico { width: 28px; height: 28px; grid-row: 1 / span 2; margin-top: 2px; } .promise h3 { margin: 0 0 4px; font-size: 1.18rem; } .promise p { font-size: 15px; } } .auto-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .auto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .auto-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .auto { padding: 24px; border-radius: 24px; background-color: var(--card); border: 1px solid var(--line); } .tone-card .auto { background-color: var(--paper); } .auto-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .auto-num { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background-color: var(--ink); color: var(--paper); font-weight: 700; font-size: 15px; } .auto-top > .hnms-ico { color: var(--ember-ink); } .auto-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background-color: var(--paper-2); color: var(--ink-2); font-size: 12.5px; font-weight: 700; } .auto-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background-color: var(--money); } .auto h3 { font-size: 1.22rem; margin-bottom: 6px; } .auto p { color: var(--ink-2); font-size: 15.5px; } .auto-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 24px; color: var(--ink-2); font-size: 15px; } .auto-note .hnms-ico { width: 20px; height: 20px; color: var(--ink-2); margin-top: 2px; } @media (max-width: 639px) { .auto-grid { gap: 10px; } .auto { padding: 18px 18px 20px; border-radius: 20px; } .auto-top { margin-bottom: 10px; } } .mod-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .mod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .mod { position: relative; isolation: isolate; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 20px; border-radius: 22px; background-color: var(--card); border: 1px solid var(--line); } .mod-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background-color: var(--a); color: var(--a-on); } .mod h3 { font-size: 1.16rem; margin: 3px 0 4px; } .mod p { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; } .mod-n { font-family: var(--font-display); font-weight: 600; color: var(--ink-3); font-size: 14px; } .kpis { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .kpis li { padding: 30px 20px; border-radius: 26px; background-color: var(--card); border: 1px solid var(--line); text-align: center; } .kpis .num { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(3rem, 2rem + 3vw, 5.2rem); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; margin-bottom: 10px; } .kpis span { color: var(--ink-2); font-weight: 600; font-size: 15px; } @media (max-width: 639px) { .kpis li { padding: 22px 14px; border-radius: 22px; } } .cmp { display: grid; gap: 14px; } .cmp-row { display: grid; gap: 16px; padding: 22px; border-radius: 26px; background-color: var(--card); border: 1px solid var(--line); } @media (min-width: 900px) { .cmp-row { grid-template-columns: 230px minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; } } .cmp-job { display: flex; gap: 14px; align-items: center; } .cmp-job h3 { font-size: 1.25rem; } .cmp-job .card-ico { background-color: var(--paper-2); color: var(--ink); } .cmp-label { font: 700 12px/1.2 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .cmp-old p:last-child { color: var(--ink-2); font-size: 16px; } .cmp-new { padding: 16px 18px; border-radius: 18px; background-color: var(--tint); } .cmp-new .cmp-label { color: var(--ember-ink); } .cmp-new p:last-child { color: var(--ink); font-size: 16px; } @media (max-width: 639px) { .cmp-row { padding: 18px; border-radius: 22px; gap: 12px; } .cmp-job .card-ico { width: 42px; height: 42px; border-radius: 12px; } } /* About */ .oikos { display: grid; gap: 26px; } .oikos-word { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(3.2rem, 1rem + 10vw, 10.5rem); line-height: 0.95; letter-spacing: -0.04em; color: var(--ember-ink); overflow-wrap: anywhere; } .oikos-parts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; padding-bottom: 26px; border-bottom: 1px solid var(--line); } .op-w { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 1.5rem + 1.5vw, 2.8rem); line-height: 1; } .op-t { color: var(--ink-2); margin-top: 6px; } .op-plus { font-family: var(--font-display); font-size: 2.2rem; color: var(--ember-ink); } .oikos-name { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 26px; } .on-part { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 150px; padding: 16px 18px; border-radius: 20px; background-color: var(--card); border: 1px solid var(--line); } .on-part strong { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; line-height: 1; letter-spacing: -0.02em; } .on-part span { color: var(--ink-2); font-size: 15px; line-height: 1.4; } .on-part.is-result { background-color: var(--night); border-color: var(--night); color: var(--cream); box-shadow: inset 0 0 0 1px var(--night-edge); } .on-part.is-result span { color: var(--paper-3); } .on-op { align-self: center; font-family: var(--font-display); font-size: 1.8rem; color: var(--ember-ink); line-height: 1; } @media (min-width: 1024px) { .oikos { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 72px; } .oikos-word { grid-column: 1 / -1; } .oikos-parts { flex-direction: column; align-items: flex-start; border-bottom: 0; } } .founder { display: grid; gap: 26px; align-items: center; max-width: 1000px; } @media (min-width: 760px) { .founder { grid-template-columns: 150px minmax(0, 1fr); gap: 40px; } } .founder-mark { width: 150px; height: 150px; border-radius: 40px; display: grid; place-items: center; background-color: var(--ember); color: var(--char); font-family: var(--font-display); font-weight: 600; font-size: 4.4rem; } @media (max-width: 759px) { .founder-mark { width: 96px; height: 96px; border-radius: 28px; font-size: 3rem; } } .founder .hnms-h2 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } /* Press */ .press-logos { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 760px) { .press-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .pl { margin: 0; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background-color: var(--card); } .pl-art { display: grid; place-items: center; min-height: 190px; padding: 32px; } .pl-art svg { width: auto; height: auto; max-width: 100%; max-height: 96px; } .pl.is-light .pl-art { background-color: #FFFFFF; } .pl.is-dark .pl-art { background-color: #15110E; } .pl figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); font-weight: 600; } .press-sub { margin: 48px 0 16px; } .swatches { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 760px) { .swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .swatches li { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 116px; padding: 18px; border-radius: 20px; border: 1px solid var(--line); } .swatches strong { font-size: 16px; } .swatches span { font-size: 13.5px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } /* Checklist */ .cl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; } .cl-head .hnms-head { margin-bottom: 0; } .checklist { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cl-group { padding: 24px; border-radius: 24px; border: 1px solid var(--line); background-color: var(--paper); break-inside: avoid; } .cl-group h3 { font-size: 1.3rem; margin-bottom: 10px; } .cl-group ol { list-style: none; margin: 0; padding: 0; } .cl-group li { display: grid; grid-template-columns: 20px 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-top: 1px dashed var(--line); font-size: 15.5px; line-height: 1.45; } .cl-box { width: 18px; height: 18px; margin-top: 2px; border: 2px solid var(--ink); border-radius: 5px; } .cl-n { font-weight: 700; color: var(--ink-3); font-size: 14px; font-variant-numeric: tabular-nums; } .cl-foot { margin-top: 24px; color: var(--ink-3); font-size: 14.5px; } .cl-preview { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; } .cl-preview li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px; background-color: var(--card); border: 1px solid var(--line); font-size: 15.5px; } .cl-preview span { color: var(--ink-3); font-size: 14px; } .aside-title { font-weight: 700; margin-top: 8px; } .aside-note { margin-top: 16px; color: var(--ink-2); font-size: 15px; } .aside-note a { color: var(--ember-ink); } /* Posts */ .post-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 720px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .post-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background-color: var(--card); border: 1px solid var(--line); } .post-cover { aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--paper-2); } .post-cover svg, .post-cover img { display: block; width: 100%; height: 100%; object-fit: cover; } .post-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 22px 24px 26px; } .post-tag { font: 700 12.5px/1.2 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember-ink); } .post-title { font-size: 1.42rem; line-height: 1.2; letter-spacing: -0.02em; } .post-desc { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; } .post-meta { margin-top: auto; padding-top: 8px; color: var(--ink-3); font-size: 14px; } @media (min-width: 1024px) { .post-card.is-lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .post-card.is-lead .post-cover { aspect-ratio: auto; min-height: 380px; } .post-card.is-lead .post-body { justify-content: center; padding: 40px; } .post-card.is-lead .post-title { font-size: 2.4rem; } .post-card.is-lead .post-desc { font-size: 17px; } } .posts-more { margin: 72px 0 22px; font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem); } .hnms-pager ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 0; padding: 0; } .hnms-pager a, .hnms-pager span { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0 16px; border-radius: 999px; border: 1px solid var(--field); text-decoration: none; font-weight: 600; } .hnms-pager .current { background-color: var(--ink); color: var(--paper); border-color: var(--ink); } /* Search */ .hnms-search { display: flex; gap: 8px; max-width: 580px; margin-top: 8px; } .hnms-search input { flex: 1; min-width: 0; } .hnms-results { margin-top: 36px; max-width: 820px; } .sr-list { list-style: none; margin: 0 0 36px; padding: 0; } .sr-list li { padding: 20px 0; border-bottom: 1px solid var(--line); } .sr-list a { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.01em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .sr-list p { color: var(--ink-2); margin-top: 6px; } @media (max-width: 479px) { .hnms-search .hnms-btn { padding: 0 18px; } .hnms-search .hnms-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } /* ------------------------------------------------------------------ */ /* Forms */ /* ------------------------------------------------------------------ */ .form-grid { display: grid; gap: 34px; align-items: start; } @media (min-width: 960px) { .form-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 72px; } .form-grid.no-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .is-start .form-copy .hnms-h1 { font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.7rem); } @media (min-width: 960px) { .is-start .form-card { position: sticky; top: calc(var(--hdr-c) + 24px); } } @media (max-width: 959px) { .is-start .form-grid { display: flex; flex-direction: column; } .is-start .form-copy { display: contents; } .is-start .form-copy .hnms-head { order: 1; margin-bottom: 4px; } .is-start .form-card { order: 2; } .is-start .form-aside { order: 3; } } .form-copy .hnms-head { margin-bottom: 28px; } .form-card { padding: clamp(22px, 3vw, 38px); border-radius: 30px; background-color: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-2); } .tone-card .form-card { background-color: var(--paper); } .aside-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .aside-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--ink-2); font-size: 16px; } .aside-list .hnms-ico { color: var(--ember-ink); width: 22px; height: 22px; margin-top: 1px; } .aside-list.is-ticks .hnms-ico { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background-color: var(--money); color: var(--char); stroke-width: 2.6; } .aside-list a { color: var(--ember-ink); } .hnms-form { position: relative; } .field { margin-bottom: 18px; min-width: 0; } .field label, .plan-pick legend { display: block; margin-bottom: 8px; font-weight: 600; font-size: 15px; color: var(--ink); } .field .opt { font-weight: 400; color: var(--ink-3); } .hnms input[type="text"], .hnms input[type="email"], .hnms input[type="password"], .hnms input[type="search"], .hnms input[type="number"], .hnms input[type="url"], .hnms textarea, .hnms select { display: block; width: 100%; min-height: 52px; padding: 13px 16px; border: 1.5px solid var(--field); border-radius: 14px; background-color: var(--paper); color: var(--ink); font: 400 16px/1.4 var(--font-text); -webkit-appearance: none; appearance: none; } .hnms textarea { resize: vertical; min-height: 150px; } .hnms select { background-image: var(--chev); background-repeat: no-repeat; background-position: right 14px center; padding-right: 44px; } .hnms input::placeholder, .hnms textarea::placeholder { color: var(--ink-3); opacity: 1; } .hnms input:focus, .hnms textarea:focus, .hnms select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(228, 87, 46, 0.24); } .field.has-err input, .field.has-err textarea, .field.has-err select { border-color: var(--bad); } .field.is-ok input, .field.is-ok textarea { border-color: var(--good); } .field-err { display: flex; gap: 6px; align-items: flex-start; color: var(--bad); font-size: 14px; font-weight: 600; margin-top: 6px; } .field-err::before { content: "!"; flex-shrink: 0; display: grid; place-items: center; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; background-color: var(--bad); color: var(--paper); font-size: 11.5px; font-weight: 800; line-height: 1; } .field-err:empty { display: none; } .field-hint { color: var(--ink-3); font-size: 14px; margin-top: 6px; } .field-row { display: grid; gap: 0 16px; } @media (min-width: 640px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .form-status { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 16px; padding: 14px 16px; border-radius: 14px; font-size: 15px; font-weight: 600; line-height: 1.45; } .form-status::before { content: ""; flex-shrink: 0; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; background-color: currentColor; -webkit-mask: var(--st-ico) center / 22px 22px no-repeat; mask: var(--st-ico) center / 22px 22px no-repeat; } .form-status:empty { display: none; } .form-status.is-ok { color: var(--ok-ink); background-color: var(--ok-bg); --st-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm5.2 7.6-6.4 7a1 1 0 0 1-1.4.1l-3-2.8 1.4-1.5 2.2 2.1 5.7-6.3Z'/%3E%3C/svg%3E"); } .form-status.is-err { color: var(--bad-ink); background-color: var(--bad-bg); --st-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm-1 5h2v8h-2Zm0 10h2v2h-2Z'/%3E%3C/svg%3E"); } .hnms-form.is-done .form-status.is-ok { padding: 22px; font-size: 16.5px; border-radius: 18px; } .hnms-form.is-done > .field, .hnms-form.is-done > .field-row, .hnms-form.is-done .form-foot > .hnms-btn, .hnms-form.is-done .nl-row { display: none; } .form-again { margin-top: 4px; } .form-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .form-fine { color: var(--ink-3); font-size: 14px; } .form-fine a { color: var(--ember-ink); } .hnms-form button[disabled] { opacity: 0.7; cursor: progress; } .hnms-form button.is-busy span::after { content: "..."; } .pw-wrap { position: relative; } .pw-wrap input { padding-right: 88px; } .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 40px; padding: 0 13px; border: 0; border-radius: 10px; background-color: var(--paper-2); color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer; } .pw-hide { display: none; } .pw-toggle[aria-pressed="true"] .pw-show { display: none; } .pw-toggle[aria-pressed="true"] .pw-hide { display: inline; } .pw-meter { display: flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--ink-3); font-size: 14px; } .pw-bar { width: 84px; height: 6px; flex-shrink: 0; border-radius: 3px; background-color: var(--line); overflow: hidden; } .pw-bar i { display: block; height: 100%; width: var(--w, 0%); background-color: var(--c, var(--ink-3)); } .plan-pick { border: 0; padding: 0; margin: 6px 0 20px; min-width: 0; } .plan-opts { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 560px) { .plan-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .plan-opt { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border: 1.5px solid var(--line); border-radius: 16px; background-color: var(--paper); cursor: pointer; } .plan-opt.is-trial { grid-column: 1 / -1; } .plan-opt input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #C84821; } .plan-opt:has(input:checked) { border-color: var(--ink); background-color: var(--tint-2); box-shadow: 0 0 0 1px var(--ink); } .po-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .po-name { font-weight: 700; font-size: 15px; } .po-price { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; } .po-note { color: var(--ink-3); font-size: 13.5px; line-height: 1.4; } .signed-in { display: grid; gap: 12px; justify-items: start; } .start-art { display: none; margin-top: 36px; max-width: 460px; } @media (min-width: 960px) { .start-art { display: block; } } .nl-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; } .nl-row .field { flex: 1 1 220px; margin-bottom: 0; } .form-newsletter .form-status { margin-top: 12px; } /* ------------------------------------------------------------------ */ /* Live demos */ /* ------------------------------------------------------------------ */ .demo { display: grid; gap: 18px; } @media (min-width: 1024px) { .demo-tell { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 22px; align-items: start; } } .demo-in { padding: clamp(20px, 3vw, 32px); border-radius: 30px; background-color: var(--night); color: var(--cream); box-shadow: inset 0 0 0 1px var(--night-edge); } @media (min-width: 1024px) { .demo-tell .demo-in { position: sticky; top: calc(var(--hdr-c) + 24px); } } .demo-label { display: block; margin-bottom: 12px; font: 700 13px/1.2 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-3); } .hnms .demo-text { min-height: 150px; padding: 18px 20px; border-radius: 20px; border-color: #857A70; background-color: var(--night-2); color: var(--cream); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.18rem, 1rem + 0.8vw, 1.55rem); line-height: 1.38; letter-spacing: -0.01em; } .hnms .demo-text:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(242, 193, 78, 0.22); } .demo-try { margin: 18px 0 10px; font-size: 14px; color: var(--paper-3); } .demo-chips { display: flex; flex-wrap: wrap; gap: 8px; } .demo-chip { min-height: 40px; padding: 8px 15px; border-radius: 999px; border: 1.5px solid #857A70; background-color: transparent; color: var(--cream); font: 600 14px/1.2 var(--font-text); cursor: pointer; } .demo-chip.is-on, .demo-chip:hover { background-color: var(--cream); border-color: var(--cream); color: var(--char); } .demo-household, .demo-honest { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; color: var(--paper-3); font-size: 14.5px; } .demo-household .hnms-ico, .demo-honest .hnms-ico { width: 18px; height: 18px; color: var(--gold); margin-top: 2px; } .demo-honest span { font-weight: 600; } .demo-out { min-height: 380px; padding: clamp(20px, 3vw, 30px); border-radius: 30px; background-color: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); } .tone-card .demo-out { background-color: var(--paper); } .demo-summary { margin-bottom: 14px; color: var(--ink-2); font-size: 15px; font-weight: 600; } .pl-block { padding: 16px 0; border-top: 1px solid var(--line); } .pl-block:first-child { border-top: 0; padding-top: 0; } .pl-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 700 12.5px/1.2 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); } .pl-h i { width: 10px; height: 10px; border-radius: 3px; background-color: var(--a); transform: rotate(45deg); } .pl-event { display: flex; align-items: center; gap: 16px; } .pl-date { flex-shrink: 0; width: 66px; height: 66px; border-radius: 18px; display: grid; place-content: center; text-align: center; line-height: 1.05; background-color: var(--time); color: #15110E; } .pl-date b { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; } .pl-date small { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .pl-title { font-family: var(--font-display); font-weight: 600; font-size: 1.38rem; letter-spacing: -0.015em; line-height: 1.2; } .pl-sub { color: var(--ink-2); font-size: 15px; margin-top: 2px; } .pl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pl-list li { display: flex; align-items: center; gap: 8px 10px; font-size: 15.5px; flex-wrap: wrap; } .pl-list li > span:not(.av):not(.dtag):not(.bd-ico) { flex: 1 1 auto; min-width: 0; } .pl-list .bd-ico { width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0; } .pl-list .bd-ico .hnms-ico { width: 15px; height: 15px; } .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex-shrink: 0; } .dtag { display: inline-flex; padding: 3px 9px; border-radius: 999px; background-color: var(--paper-2); color: var(--ink-2); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; } .dtag.is-sug { background-color: var(--sug-bg); color: var(--sug-ink); } .dtag.is-warn { background-color: var(--bad-bg); color: var(--bad-ink); } @media (max-width: 559px) { .pl-list li > span:not(.av):not(.dtag):not(.bd-ico) { flex-basis: calc(100% - 40px); } .pl-list li > .dtag { margin-left: 0; } .pl-list li > span:not(.av):not(.dtag):not(.bd-ico) + .dtag { margin-left: 38px; } .pl-notes li > span + .dtag { margin-left: 0; } } .pl-aisle { margin: 10px 0 6px; color: var(--ink-3); font-size: 13px; font-weight: 700; } .pl-notes li { color: var(--ink-2); font-size: 14.5px; align-items: flex-start; flex-wrap: nowrap; } .pl-notes li > span { flex-basis: auto !important; } .pl-notes .hnms-ico { width: 18px; height: 18px; color: var(--time-ink); margin-top: 2px; } .pl-empty { color: var(--ink-2); font-size: 16px; } .brief-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .bubble-q { display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px; border-radius: 24px 24px 24px 6px; background-color: var(--night); color: var(--cream); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.12rem, 1rem + 0.6vw, 1.45rem); letter-spacing: -0.01em; box-shadow: inset 0 0 0 1px var(--night-edge); } .bubble-q .hnms-ico { color: var(--gold); } .brief-out { padding: clamp(20px, 3vw, 30px); border-radius: 30px; background-color: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); min-height: 300px; } .tone-card .brief-out { background-color: var(--paper); } .brief-out[aria-busy="true"] { opacity: 0.55; } .bd-grid { display: grid; gap: 24px; } @media (min-width: 960px) { .bd-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr); gap: 32px; } } .bd-range { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; letter-spacing: -0.02em; margin-bottom: 4px; } .bd-sub { color: var(--ink-3); font-size: 14.5px; margin-bottom: 10px; } .bd-day { padding: 14px 0; border-top: 1px solid var(--line); } .bd-label { font-weight: 700; font-size: 14px; margin-bottom: 6px; } .bd-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 0; } .bd-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background-color: var(--a); color: var(--a-on); } .bd-ico .hnms-ico { width: 17px; height: 17px; } .bd-t { font-size: 15.5px; line-height: 1.35; min-width: 0; } .bd-t small { display: block; color: var(--ink-3); font-size: 13px; } .bd-v { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; } .bd-side { display: grid; gap: 12px; align-content: start; } .bd-card { padding: 18px 20px; border-radius: 20px; background-color: var(--paper-2); } .bd-card h4 { font-family: var(--font-text); font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; } .bd-card .bd-big { font-family: var(--font-display); font-weight: 600; font-size: 2.7rem; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .bd-card p { color: var(--ink-2); font-size: 14.5px; margin-top: 4px; } .bd-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .bd-nums strong { display: block; font-family: var(--font-display); font-size: 1.9rem; line-height: 1; } .bd-nums span { font-size: 13px; color: var(--ink-2); } .bd-warn { background-color: var(--warn-bg); } .bd-warn h4 { color: var(--ember-ink); } .bd-text { margin: 0; padding: 18px; border-radius: 18px; background-color: var(--paper-2); color: var(--ink); font: 400 14.5px/1.6 var(--font-text); white-space: pre-wrap; } .demo-brief .demo-honest, .demo-memory .demo-honest { color: var(--ink-3); } .demo-brief .demo-honest .hnms-ico, .demo-memory .demo-honest .hnms-ico { color: var(--ember-ink); } .bd-toggle { margin-top: 18px; } .demo-memory { padding: clamp(20px, 3vw, 32px); border-radius: 30px; background-color: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); } .tone-card .demo-memory { background-color: var(--paper); } .demo-memory .demo-label { color: var(--ink-2); } .mem-row { display: flex; gap: 10px; flex-wrap: wrap; } .hnms .mem-q { flex: 1 1 240px; width: auto; font-size: 18px; } .demo-memory .demo-chips { margin-top: 14px; } .demo-memory .demo-chip { color: var(--ink); border-color: var(--field); } .demo-memory .demo-chip.is-on, .demo-memory .demo-chip:hover { background-color: var(--ink); border-color: var(--ink); color: var(--paper); } @media (max-width: 559px) { .mem-row .hnms-btn { flex: 1 1 100%; } .demo-memory .demo-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * clamp(20px, 3vw, 32px)); padding: 2px clamp(20px, 3vw, 32px) 6px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); } .demo-memory .demo-chips::-webkit-scrollbar { display: none; } .demo-memory .demo-chip { flex-shrink: 0; scroll-snap-align: start; white-space: nowrap; } } .mem-out { margin-top: 20px; } .mem-out:empty { display: none; } .mem-answer { margin-bottom: 14px; padding: 20px 22px; border-radius: 20px; background-color: var(--paper-2); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.85rem); line-height: 1.3; letter-spacing: -0.015em; } .mem-rec { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--line); } .mem-rec .bd-ico { width: 46px; height: 46px; border-radius: 14px; } .mem-rec .bd-ico .hnms-ico { width: 22px; height: 22px; } .mem-k { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .mem-t { font-weight: 700; font-size: 16.5px; } .mem-rec dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin-top: 8px; font-size: 14.5px; } .mem-rec dt { color: var(--ink-3); } .mem-rec dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; } .mem-why { margin-top: 10px; color: var(--ink-3); font-size: 13.5px; } .mem-more { margin-top: 12px; color: var(--ink-2); font-size: 14.5px; } @media (max-width: 479px) { .mem-rec { grid-template-columns: minmax(0, 1fr); } .mem-rec .bd-ico { width: 40px; height: 40px; } } /* ------------------------------------------------------------------ */ /* Footer */ /* ------------------------------------------------------------------ */ .hnms-footer { padding: clamp(56px, 7vw, 96px) 0 32px; background-color: var(--night); color: var(--cream); overflow: hidden; box-shadow: inset 0 1px 0 var(--night-edge); } .ft-top { display: grid; gap: 44px; } .ft-brand { display: grid; gap: 28px; padding-bottom: 40px; border-bottom: 1px solid var(--night-line); } @media (min-width: 900px) { .ft-brand { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; gap: 56px; } } .hnms-footer .brand { color: var(--cream); } .ft-line { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.15; letter-spacing: -0.025em; margin: 20px 0 14px; max-width: 18ch; } .ft-promise { display: flex; gap: 10px; align-items: flex-start; color: var(--paper-3); font-size: 15px; } .ft-promise .hnms-ico { width: 20px; height: 20px; color: var(--gold); margin-top: 2px; } .ft-promise a { color: var(--cream); } .hnms-footer .form-newsletter { max-width: 480px; width: 100%; justify-self: end; } @media (max-width: 899px) { .hnms-footer .form-newsletter { justify-self: start; } } .hnms-footer .nl-title { font-weight: 600; margin-bottom: 12px; color: var(--cream); } .hnms-footer .field label { color: var(--paper-3); font-size: 14px; } .hnms .hnms-footer input[type="email"] { background-color: var(--night-2); color: var(--cream); border-color: #857A70; } .hnms-footer input::placeholder { color: var(--paper-3); } .hnms .hnms-footer input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(242, 193, 78, 0.2); } .hnms-footer .field-err { color: #F2A99E; } .hnms-footer .field-err::before { background-color: #F2A99E; color: #15110E; } .hnms-footer .form-status.is-ok { color: #CFEBDD; background-color: #173D2C; } .hnms-footer .form-status.is-err { color: #F8D3CD; background-color: #4A1B16; } .ft-cols { display: grid; gap: 30px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 760px) { .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1280px) { .ft-cols { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .ft-h { font: 700 12.5px/1.2 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-3); margin-bottom: 10px; } .ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .ft-col a { display: inline-block; padding: 6px 0; color: var(--cream); text-decoration: none; font-size: 15px; line-height: 1.35; } .ft-col a:hover, .ft-legal a:hover { text-decoration: underline; text-underline-offset: 3px; } .ft-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--night-line); color: var(--paper-3); font-size: 14px; } .ft-legal { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; } .ft-legal a { display: inline-block; padding: 4px 0; color: var(--paper-3); text-decoration: none; } .ft-giant { margin: 40px 0 -0.22em; font-family: var(--font-display); font-weight: 600; font-size: clamp(4.2rem, 1rem + 16vw, 17rem); line-height: 0.8; letter-spacing: -0.055em; text-align: center; white-space: nowrap; color: var(--giant); user-select: none; pointer-events: none; overflow: hidden; } /* ------------------------------------------------------------------ */ /* Pages rendered from the site editor and PMPro */ /* ------------------------------------------------------------------ */ .hnms-owner { margin-inline: auto; } .hnms-pmpro { max-width: 900px; margin-inline: auto; font-size: 16.5px; color: var(--ink); } .hnms-pmpro h2, .hnms-pmpro h3 { font-family: var(--font-display); margin: 1.4em 0 0.6em; } .hnms-pmpro table { width: 100%; border-collapse: collapse; margin: 1em 0; background-color: var(--card); border-radius: 18px; overflow: hidden; } .hnms-pmpro th, .hnms-pmpro td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; color: var(--ink); } .hnms-pmpro label { display: block; font-weight: 600; margin: 12px 0 6px; } .hnms-pmpro .pmpro_btn, .hnms-pmpro input[type="submit"], .hnms-pmpro button[type="submit"], .hnms-pmpro .pmpro_btn-submit-checkout { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background-color: #C84821; color: #FFFFFF; font: 700 16px/1 var(--font-text); text-decoration: none; cursor: pointer; } .hnms-pmpro .pmpro_message, .hnms-pmpro .pmpro_card, .hnms-pmpro .pmpro_box { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background-color: var(--card); color: var(--ink); margin: 1em 0; } .hnms-pmpro .pmpro_error { border-color: var(--bad); color: var(--bad-ink); background-color: var(--bad-bg); } .hnms-pmpro .pmpro_success { border-color: var(--money); color: var(--ok-ink); background-color: var(--ok-bg); } .hnms-pmpro fieldset { border: 0; padding: 0; margin: 0 0 1.5em; } .hnms-pmpro legend { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; margin-bottom: 0.4em; color: var(--ink); } .hnms-pmpro a:not([class]) { color: var(--ember-ink); } .hnms-pmpro select, .hnms-pmpro input[type="checkbox"], .hnms-pmpro input[type="radio"] { accent-color: #C84821; } /* ------------------------------------------------------------------ */ /* Hover (pointer devices only) */ /* ------------------------------------------------------------------ */ @media (hover: hover) { .hnms-card:hover, .post-card:hover, .mod:hover, .layer-tile:hover { box-shadow: var(--shadow-2); } .hnms-card.is-link:hover, .post-card:hover, .mod:hover { transform: translateY(-4px); border-color: transparent; } .hnms-card:hover::before { opacity: 1; } .layer-tile:hover { transform: translateY(-6px); } .layer-tile:hover::before { opacity: 1; } .layer-tile:hover .lt-go { transform: rotate(-45deg); } .post-card:hover .post-cover svg, .post-card:hover .post-cover img { transform: scale(1.04); } .hnms-card.is-link:hover .card-more .hnms-ico { transform: translateX(4px); } .faq-item summary:hover .faq-pm { border-color: var(--ink); } .faq-item summary:hover { color: var(--ember-ink); } } /* ------------------------------------------------------------------ */ /* Motion (only when the visitor has not asked for less) */ /* ------------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference) { html.hnms-motion { scroll-behavior: smooth; } .hnms-btn { transition: color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } .hnms-btn::before { transition: transform 0.5s var(--ease); } .hnms-btn .hnms-ico, .hnms-arrowlink .hnms-ico, .card-more .hnms-ico { transition: transform 0.35s var(--ease); } .hnms-card, .post-card, .mod, .layer-tile { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease); } .hnms-card::before, .layer-tile::before { transition: opacity 0.4s var(--ease); } .lt-go, .nav-trigger .hnms-ico, .faq-pm, .sheet-group > summary .hnms-ico, .toc-toggle .hnms-ico { transition: transform 0.35s var(--ease), background-color 0.3s, color 0.3s, border-color 0.3s; } .faq-item summary { transition: color 0.25s; } .post-cover svg, .post-cover img { transition: transform 0.9s var(--ease); } .hnms-header { transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s; } .hdr { transition: height 0.35s var(--ease); } .brand .hnms-mark { transition: width 0.35s var(--ease), height 0.35s var(--ease); } .to-top { transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, background-color 0.25s, color 0.25s; } .theme-btn, .tm-opt, .seg-opt { transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; } .pw-bar i { transition: width 0.3s var(--ease), background-color 0.3s; } .nav-item.is-open > [data-panel] { animation: hnms-drop 0.28s var(--ease) both; } .theme-menu:not([hidden]) { animation: hnms-drop 0.22s var(--ease) both; } .hnms-sheet.is-open .sheet-inner { animation: hnms-sheet 0.4s var(--ease) both; } .form-status:not(:empty) { animation: hnms-fade-up 0.35s var(--ease) both; } .brief-out { transition: opacity 0.2s; } /* Scroll reveals: targets are chosen in JavaScript and never hidden in the markup. */ .hnms-motion .rv { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--rd, 0s); } .hnms-motion .rv.rv-in { opacity: 1; transform: none; } /* Headline words rise on load. */ .hnms-motion :is(.hnms-h1) .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.06em 0.12em 0; margin: 0 -0.06em -0.12em 0; } .hnms-motion :is(.hnms-h1) .w > span { display: inline-block; animation: hnms-rise 1s var(--ease) both; animation-delay: calc(0.06s + var(--i) * 0.055s); } .hnms-motion .hero-copy > :not(h1) { animation: hnms-fade 0.9s var(--ease) both; animation-delay: 0.45s; } /* The hero composition assembles. */ .hnms-motion .hnms-art .tile { transform-box: fill-box; transform-origin: center; animation: hnms-assemble 1.15s var(--ease) both; animation-delay: var(--d, 0s); } .hnms-motion .hnms-hero-art .roof, .hnms-motion .hnms-art .roof { stroke-dasharray: 1; animation: hnms-draw 1.3s var(--ease) 0.7s both; } .hnms-motion .hnms-art .spark { transform-box: fill-box; transform-origin: center; animation: hnms-pop 0.7s var(--ease) 1.4s both; } .hnms-motion .hnms-art .chip { transform-box: fill-box; transform-origin: center; animation: hnms-fade 0.7s var(--ease) both, hnms-float 7s ease-in-out infinite; animation-delay: var(--d, 0s), calc(var(--d, 0s) + 0.7s); } .hnms-motion .hnms-art .mini { animation: hnms-fade 0.8s var(--ease) 0.3s both; } .hnms-motion .hnms-hero-art .orbit { transform-box: view-box; transform-origin: 320px 330px; animation: hnms-spin 90s linear infinite; } .hnms-motion .hnms-orbit-art .orbit { transform-box: view-box; transform-origin: 320px 300px; animation: hnms-spin 90s linear infinite; } .hnms-motion .hnms-art .orbit.o2 { animation-duration: 140s; animation-direction: reverse; } .hnms-motion .hnms-spot .float { transform-box: fill-box; transform-origin: center; animation: hnms-float 7s ease-in-out infinite; } .hnms-motion .hnms-spot .float.f2 { animation-duration: 9s; animation-delay: -3s; } .hnms-motion .hnms-spot .spin { transform-box: fill-box; transform-origin: center; animation: hnms-spin 26s linear infinite; } .hnms-motion .hnms-spot .spin-slow { transform-box: fill-box; transform-origin: center; animation: hnms-spin 60s linear infinite; } .hnms-motion .hnms-spot .pulse { transform-box: fill-box; transform-origin: center; animation: hnms-breathe 4s ease-in-out infinite; } /* Endless loops pause while their section is off screen. */ .hnms-motion .is-paused :is(.orbit, .chip, .float, .spin, .spin-slow, .pulse, .mq-track) { animation-play-state: paused !important; } /* The flow draws itself when it scrolls into view. */ .hnms-motion .draw-ready .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease); transition-delay: var(--d, 0s); } .hnms-motion .draw-ready.rv-in .draw { stroke-dashoffset: 0; } .hnms-motion .draw-ready .node { opacity: 0; transition: opacity 0.7s var(--ease); transition-delay: var(--d, 0s); } .hnms-motion .draw-ready.rv-in .node { opacity: 1; } /* The marquee runs. */ .hnms-motion .mq-track { display: flex; width: max-content; animation: hnms-marquee 44s linear infinite; } .hnms-motion .mq-row { flex-wrap: nowrap; flex-shrink: 0; padding: 0 18px 0 0; gap: 36px; } .hnms-motion .mq-row + .mq-row { padding-left: 18px; } .hnms-motion .mq-dup { display: flex; } .hnms-motion .hnms-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .hnms-motion .hnms-marquee:hover .mq-track { animation-play-state: paused; } /* The seven apps are crossed out one by one, then one place arrives. Nothing moves across anything else. */ .hnms-motion .hnms-stack.stack-ready .st-chip span::after { transform: scaleX(0); transition: transform 0.5s var(--ease); transition-delay: calc(0.35s + var(--i) * 0.12s); } .hnms-motion .hnms-stack.stack-ready .st-chip { opacity: 0; transform: translate3d(0, 12px, 0) rotate(var(--r, 0deg)); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), color 0.5s; transition-delay: calc(var(--i) * 0.06s); } .hnms-motion .hnms-stack.stack-ready .st-arrow { opacity: 0; transform: translate3d(0, -8px, 0); transition: opacity 0.5s var(--ease) 1.3s, transform 0.5s var(--ease) 1.3s; } .hnms-motion .hnms-stack.stack-ready .st-one { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.97); transition: opacity 0.7s var(--ease) 1.45s, transform 0.7s var(--ease) 1.45s, box-shadow 0.7s var(--ease) 1.45s; } .hnms-motion .hnms-stack.stack-ready .st-tiles i { opacity: 0; transform: scale(0.4); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); transition-delay: calc(1.75s + var(--j) * 0.07s); } .hnms-motion .hnms-stack.stack-ready.rv-in .st-chip { opacity: 1; transform: rotate(var(--r, 0deg)); color: var(--ink-3); } .hnms-motion .hnms-stack.stack-ready.rv-in .st-chip span::after { transform: none; } .hnms-motion .hnms-stack.stack-ready.rv-in .st-arrow { opacity: 1; transform: none; } .hnms-motion .hnms-stack.stack-ready.rv-in .st-one { opacity: 1; transform: none; } .hnms-motion .hnms-stack.stack-ready.rv-in .st-tiles i { opacity: 1; transform: none; } /* Statement words light up as you read, and stay lit. */ .hnms-motion .js-highlight.hl-on .hw { color: color-mix(in srgb, var(--ink) 34%, transparent); transition: color 0.45s var(--ease); } .hnms-motion .js-highlight.hl-on .hw.is-lit { color: var(--ink); } .hnms-motion .tone-night .js-highlight.hl-on .hw { color: color-mix(in srgb, var(--cream) 34%, transparent); } .hnms-motion .tone-night .js-highlight.hl-on .hw.is-lit { color: var(--cream); } /* Demo output settles in. */ .hnms-motion .demo-out .pl-block, .hnms-motion .bd-grid, .hnms-motion .mem-out > * { animation: hnms-fade-up 0.5s var(--ease) both; } .hnms-motion .demo-out .pl-block:nth-child(2) { animation-delay: 0.05s; } .hnms-motion .demo-out .pl-block:nth-child(3) { animation-delay: 0.1s; } .hnms-motion .demo-out .pl-block:nth-child(4) { animation-delay: 0.15s; } .hnms-motion .demo-out .pl-block:nth-child(5) { animation-delay: 0.2s; } } @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) { .hnms-motion .rv.rv-l { transform: translate3d(-44px, 0, 0); } .hnms-motion .rv.rv-r { transform: translate3d(44px, 0, 0); } .hnms-motion .rv.rv-l.rv-in, .hnms-motion .rv.rv-r.rv-in { transform: none; } } @keyframes hnms-rise { from { transform: translate3d(0, 108%, 0); } to { transform: none; } } @keyframes hnms-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes hnms-fade-up { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } } @keyframes hnms-drop { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: none; } } @keyframes hnms-sheet { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } } @keyframes hnms-assemble { from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 30px)) rotate(var(--rot, 0deg)) scale(0.86); } to { opacity: 1; transform: none; } } @keyframes hnms-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes hnms-pop { 0% { opacity: 0; transform: scale(0.4); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } } @keyframes hnms-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -7px, 0); } } @keyframes hnms-spin { to { transform: rotate(360deg); } } @keyframes hnms-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes hnms-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* Theme switch: a quick cross-fade where the browser supports it. */ @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; } } /* ------------------------------------------------------------------ */ /* Print: always light */ /* ------------------------------------------------------------------ */ @media print { html[data-theme], html:not([data-theme]) { color-scheme: light; --ink: #1B1714; --ink-2: #4A423B; --ink-3: #6B6259; --paper: #FFFFFF; --paper-2: #F3ECE2; --card: #FFFFFF; --line: #D9CFC3; --night: #15110E; --night-2: #211B17; --ember-ink: #B23C17; --people-ink: #5B3FB5; --time-ink: #1D5FB0; --money-ink: #127A50; --work-ink: #A95A0E; --memory-ink: #9E2F60; --context-ink: #0E7686; --sv-card: #FFFFFF; --sv-line: #E6DDD1; --sv-line2: #C9BEB1; --sv-ink: #1B1714; --sv-ink2: #4A423B; --sv-ink3: #6B6259; --sv-soft: #F3ECE2; --sv-paper: #FBF7F1; --cv-a: #F3ECE2; --cv-b: #FBF7F1; --cv-line: #E6DDD1; --cv-ink: #1B1714; --tint: #FDF3EC; } body.hnms-body, html.hnms-root { background-color: #FFFFFF; } .hnms { background-color: #FFFFFF; font-size: 11pt; color: #1B1714; } .hnms-main { padding-top: 0; } .hnms-header, .hnms-footer, .hnms-skip, .hnms-sheet, .no-print, .s-cta-band, .hnms-progress, #wpadminbar, .cl-head .hnms-btn, .prose-toc, .s-hero::before, .to-top, .h-anchor, .theme-pick { display: none !important; } .hnms-sec { padding: 12pt 0 !important; background-color: #FFFFFF !important; box-shadow: none !important; } .rv { opacity: 1 !important; transform: none !important; } .checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 10pt; } .cl-group { border: 1px solid #999999; padding: 10pt; border-radius: 6pt; page-break-inside: avoid; background-color: #FFFFFF; } .cl-group li { font-size: 9.5pt; padding: 4pt 0; } .cl-box { border-color: #1B1714; } .cl-head { margin-bottom: 10pt; } .cl-head .hnms-h2 { font-size: 20pt; } .hnms-prose { font-size: 11pt; max-width: none; } .prose-grid.has-toc { display: block; } .hnms a { color: #000000; } } @media (max-width: 639px) { .hnms-hero-art .c-far { display: none; } } /* Phones: the orbit labels would be too small to read, so the drawing keeps only the tile and the house. */ @media (max-width: 479px) { .hnms-orbit-art .chip { display: none; } .hero-page .hero-media, .hero-layer .hero-media { max-width: 300px; margin-inline: auto; } .hero-grid.has-media { gap: 24px; } }