/* hohl.dev - one look for the network: graphite, chalk, one signal colour per app (--hohl-accent). */ :root { --hohl-accent: #f5b83d; --hohl-accent-ink: #161514; --accent: var(--hohl-accent); --display: var(--wp--preset--font-family--display, "Barlow Condensed", sans-serif); --radius: 18px; --wide: 1200px; --gutter: clamp(16px, 4vw, 32px); /* dark (default): graphite and chalk, like the DCFT app */ --bg: #161514; --bg-deep: #121110; --surface: #1f1d1b; --surface-2: #2a2825; --line: #34312d; --line-strong: #4a4540; --text: #f4f0e8; --text-2: #ddd8ce; --muted: #a39d92; --shadow-pop: 0 20px 50px rgba(0, 0, 0, .5); color-scheme: dark; } /* light: chalk paper and ink (the app's light mode) - by choice or by the system */ :root[data-theme="light"] { --bg: #f2ede4; --bg-deep: #e9e3d8; --surface: #fbf8f2; --surface-2: #e5dfd3; --line: #d8d1c4; --line-strong: #c4bcad; --text: #24211d; --text-2: #3d3934; --muted: #625d55; --shadow-pop: 0 20px 50px rgba(36, 33, 29, .16); color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f2ede4; --bg-deep: #e9e3d8; --surface: #fbf8f2; --surface-2: #e5dfd3; --line: #d8d1c4; --line-strong: #c4bcad; --text: #24211d; --text-2: #3d3934; --muted: #625d55; --shadow-pop: 0 20px 50px rgba(36, 33, 29, .16); color-scheme: light; } } /* theme.json colours follow the tokens */ html:root { --wp--preset--color--bg: var(--bg); --wp--preset--color--surface: var(--surface); --wp--preset--color--surface-2: var(--surface-2); --wp--preset--color--line: var(--line); --wp--preset--color--text: var(--text); --wp--preset--color--muted: var(--muted); } body { background: var(--bg); color: var(--text); transition: background-color .25s, color .25s; } html { scroll-behavior: smooth; scroll-padding-top: 88px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } ::selection { background: var(--accent); color: var(--hohl-accent-ink); } img { max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; } h1, h2, h3, h4 { text-wrap: balance; hyphens: manual; overflow-wrap: break-word; } p { text-wrap: pretty; } .wp-site-blocks { padding: 0; } .wp-site-blocks > * + * { margin-block-start: 0; } /* ---------- Buttons ---------- */ .btn, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.2rem; line-height: 1.1; padding: 0.72em 1.4em; border-radius: 14px; background: var(--accent); color: var(--hohl-accent-ink); text-decoration: none; border: 0; transition: background-color .15s, color .15s, transform .15s; } .btn:hover, .wp-block-button__link:hover { background: var(--text); color: var(--bg); } .btn:active { transform: translateY(1px); } .btn-small { font-size: 1rem; padding: 0.55em 1em; border-radius: 11px; } .btn.is-soon { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); cursor: default; } .btn.is-soon:hover { background: transparent; color: var(--text); } .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); } .wp-block-button.is-style-outline .wp-block-button__link:hover { box-shadow: inset 0 0 0 1.5px var(--text); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--line); } .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } } .site-header .bar { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 12px var(--gutter); display: flex; align-items: center; gap: 24px; min-height: 64px; box-sizing: border-box; } .brand-wrap { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); } .brand img { border-radius: 9px; display: block; } .brand-name { font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1; letter-spacing: 0.01em; } .brand-name span { color: var(--muted); } .brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--text); color: var(--bg); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1; padding-bottom: 2px; box-sizing: border-box; } .brand-by { font-size: .8rem; color: var(--muted); text-decoration: none; white-space: nowrap; } .brand-by:hover { color: var(--text); } .main-nav { margin-left: auto; } .main-nav ul, .menu-panel ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; } .main-nav a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: .95rem; } .main-nav a:hover { color: var(--text); background: var(--surface); } .bar-end { display: flex; align-items: center; gap: 14px; } .menu { display: none; position: relative; } .menu summary { list-style: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; background: var(--surface); } .menu summary::-webkit-details-marker { display: none; } .menu summary span, .menu summary span::before, .menu summary span::after { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; position: relative; content: ""; transition: transform .2s; } .menu summary span::before { position: absolute; top: -6px; } .menu summary span::after { position: absolute; top: 6px; } .menu[open] summary span { background: transparent; } .menu[open] summary span::before { transform: translateY(6px) rotate(45deg); } .menu[open] summary span::after { transform: translateY(-6px) rotate(-45deg); } .menu-panel { position: absolute; right: 0; top: 50px; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: var(--shadow-pop); } .menu-panel ul { flex-direction: column; } .menu-panel a { display: block; padding: 11px 14px; border-radius: 9px; color: var(--text); text-decoration: none; font-weight: 500; } .menu-panel a:hover { background: var(--surface-2); } @media (max-width: 900px) { .main-nav { display: none; } .menu { display: block; } .bar-end { margin-left: auto; } } @media (max-width: 560px) { .site-header .bar { gap: 10px; } .brand-by, .site-header .btn-store { display: none; } .bar-end { gap: 8px; } } /* ---------- Page frame ---------- */ .site-main { padding-bottom: clamp(48px, 8vw, 96px); } .site-main.is-doc { padding-top: clamp(24px, 4vw, 48px); } .site-main.is-wide > .wp-block-post-content > * { /* sections handle their own width */ } .is-doc .wp-block-post-title { font-size: clamp(2.5rem, 6vw, 4rem); margin-top: .3em; } .is-doc .wp-block-post-content h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); margin-top: 2em; } .is-doc .wp-block-post-content h3 { margin-top: 1.6em; } .is-doc .wp-block-post-content p, .is-doc .wp-block-post-content li { color: var(--text-2); } .breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .85rem; color: var(--muted); } .breadcrumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; } .breadcrumbs a { color: var(--muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--text); } /* Sections: full-width bands with a wide inner column */ .section { padding-block: clamp(56px, 9vw, 120px); } .section.is-tight { padding-block: clamp(36px, 6vw, 72px); } .section.is-surface { background: var(--surface); border-block: 1px solid var(--line); } .section + .section:not(.is-surface) { padding-top: 0; } .section.is-surface + .section { padding-top: clamp(56px, 9vw, 120px); } .eyebrow { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 .6em; } /* Apple product names keep their exact spelling in all-caps labels (Apple trademark guidelines): iPhone. */ .eyebrow .tm, .tile-kind .tm, .app-kind .tm, .spec-k .tm, .sr-group .tm { text-transform: none; } .lead { font-size: clamp(1.125rem, 2vw, 1.3125rem); line-height: 1.55; color: var(--text-2); } .muted, .has-muted-color { color: var(--muted); } .section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px) !important; } .section-head.has-text-align-center, .section-head.is-center { margin-inline: auto !important; text-align: center; } .section-head h2 { margin-top: 0; } .section-head p:last-child { margin-bottom: 0; } /* ---------- Hero ---------- */ .hero { padding-block: clamp(40px, 7vw, 96px) clamp(48px, 7vw, 96px); position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -30% -10% auto 40%; height: 620px; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); pointer-events: none; z-index: 0; } .hero > * { position: relative; z-index: 1; } .hero h1 { font-size: clamp(3rem, 8vw, 5.5rem); line-height: .95; margin: 0 0 .25em; } .hero h1 em, h2 em { font-style: normal; color: var(--accent); } .hero .lead { max-width: 560px; } .hero-grid { gap: clamp(32px, 6vw, 80px) !important; align-items: center !important; } .hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.5rem !important; } .chip, .hero-chips p { margin: 0 !important; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .85rem; color: var(--text-2); } .hero-app { display: flex; align-items: center; gap: 14px; margin-bottom: 1.2rem !important; } .hero-app img { border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.4); } /* Phone frame around a screenshot (core/image with the class "is-phone") */ .is-phone { margin: 0 auto !important; max-width: 300px; } .is-phone img { display: block; width: 100%; border-radius: 42px; border: 9px solid #0b0a0a; box-shadow: 0 0 0 1.5px #3b3733, 0 40px 80px -20px rgba(0, 0, 0, .75), 0 0 120px -40px color-mix(in srgb, var(--accent) 45%, transparent); background: #0b0a0a; box-sizing: border-box; } .is-phone figcaption { text-align: center; color: var(--muted); font-size: .85rem; margin-top: 14px; } .is-phone.is-small { max-width: 240px; } .phone-pair { display: flex !important; justify-content: center; gap: clamp(12px, 3vw, 28px); align-items: flex-start; } .phone-pair > .is-phone { flex: 1 1 0; max-width: 270px; margin: 0 !important; } .phone-pair > .is-phone:nth-child(2) { margin-top: 48px !important; } /* ---------- Facts band ---------- */ .facts { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px !important; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .facts > * { background: var(--bg); padding: 22px 20px; margin: 0 !important; } .facts strong { display: block; font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--text); margin-bottom: 6px; } .facts p { color: var(--muted); font-size: .92rem; line-height: 1.4; } @media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Steps ---------- */ .steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: step; } .steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px 24px; color: var(--text-2); line-height: 1.5; } .steps li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--display); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--accent); margin-bottom: 14px; } .steps li strong { display: block; color: var(--text); font-size: 1.1rem; margin-bottom: 4px; } @media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } } /* ---------- Feature rows (core/columns with the class "feature": a phone and a text column) ---------- */ .feature.wp-block-columns { gap: clamp(28px, 6vw, 88px) !important; align-items: center !important; } .feature .feature-media { flex: 0 0 38% !important; } .feature .feature-media .is-phone { max-width: 290px; } .feature + .feature { margin-top: clamp(64px, 10vw, 128px) !important; } .feature h2 { margin-top: 0; } .feature ul { padding-left: 0; list-style: none; } .feature ul li { position: relative; padding-left: 26px; margin: .5em 0; color: var(--text-2); } .feature ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); } @media (max-width: 781px) { .feature.wp-block-columns { flex-direction: column; } .feature .feature-media { order: 2; flex-basis: auto !important; width: 100%; } .feature .feature-media .is-phone { max-width: 250px; } } /* ---------- Cards ---------- */ .cards { gap: 16px !important; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px !important; height: 100%; box-sizing: border-box; } .card h3 { font-size: 1.5rem; margin: 0 0 .4em; } .card p { color: var(--text-2); margin: 0; line-height: 1.55; } .card .card-icon { font-size: 1.6rem; line-height: 1; margin: 0 0 14px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); } .cards > .wp-block-column { display: flex; } .cards > .wp-block-column > .card { flex: 1; } /* Free and Pro */ .plans { gap: 16px !important; } .plan { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 30px 28px !important; height: 100%; box-sizing: border-box; } .plan.is-pro { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface) 60%); } .plan h3 { font-size: 2rem; margin: 0; } .plan .price { font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--accent); margin: .2em 0 1em; text-transform: uppercase; letter-spacing: .03em; } .plan ul { list-style: none; padding: 0; margin: 0; } .plan li { padding: 10px 0 10px 30px; border-top: 1px solid var(--line); position: relative; color: var(--text-2); } .plan li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 14px; height: 8px; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); } .plans > .wp-block-column { display: flex; } .plans > .wp-block-column > .plan { flex: 1; } /* Privacy band */ .privacy-band { border-radius: 24px; padding: clamp(28px, 5vw, 56px) !important; background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; } .privacy-band h2 { margin-top: 0; } .privacy-list { list-style: none; padding: 0; margin: 1.5em 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .privacy-list li { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 16px; font-weight: 600; text-align: center; } .privacy-list li::before { content: ""; display: block; width: 18px; height: 18px; margin: 0 auto 8px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206L6%2018%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206L6%2018%22/%3E%3C/svg%3E") center / contain no-repeat; } @media (max-width: 760px) { .privacy-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- FAQ (core/details in a group with the class "faq") ---------- */ .faq { max-width: 820px; margin-inline: auto !important; } .faq .wp-block-details { border-top: 1px solid var(--line); padding: 0; margin: 0 !important; } .faq .wp-block-details:last-child { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; padding: 22px 48px 22px 0; font-weight: 600; font-size: 1.125rem; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 400; color: var(--accent); transition: transform .2s; } .faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); } .faq details > :not(summary) { color: var(--text-2); max-width: 70ch; } /* Space below an open answer sits on the details block itself, not on its last child: WordPress gives core/details a flow layout whose ":where(.is-layout-flow) > :last-child { margin-block-end: 0 }" wins over child margins and glued the answer to the next divider. Applies to every core/details block of the theme. */ .wp-block-details[open] { padding-bottom: 22px !important; } .wp-block-details > :not(summary) { margin-block: 0 !important; } .wp-block-details > :not(summary) + :not(summary) { margin-block-start: .9em !important; } /* ---------- App cards (hub) ---------- */ .app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; } .app-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; overflow: hidden; } .app-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--card-accent); } .app-card:hover { border-color: color-mix(in srgb, var(--card-accent) 60%, var(--line)); transform: translateY(-3px); } .app-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; } .app-icon { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); } .app-status { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); } .app-status.is-live { background: color-mix(in srgb, var(--card-accent) 20%, transparent); color: var(--card-accent); } .app-status.is-beta { color: var(--card-accent); } .app-kind { margin: 0; color: var(--card-accent); font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .95rem; } .app-name { font-size: 2.6rem; margin: .1em 0 .15em; } .app-name a { text-decoration: none; color: var(--text); } .app-name a::after { content: ""; position: absolute; inset: 0; } .app-tagline { font-weight: 600; margin: 0 0 .6em; font-size: 1.1rem; } .app-summary { color: var(--text-2); margin: 0 0 1em; line-height: 1.55; } .app-platform { color: var(--muted); font-size: .88rem; margin: auto 0 1em; } .app-more { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--card-accent); } .app-card.is-placeholder { border-style: dashed; background: transparent; justify-content: center; align-items: flex-start; } .app-card.is-placeholder::before { display: none; } /* Get the app */ .get-app { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 1.75rem; } .get-app.is-center { align-items: center; text-align: center; } .get-app-note { color: var(--muted); font-size: .9rem; margin: 0; max-width: 440px; } /* CTA band */ .cta-band { text-align: center; } .cta-band .cta-icon { width: 96px; margin: 0 auto 20px !important; } .cta-band .cta-icon img { display: block; width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 20px 50px -10px color-mix(in srgb, var(--accent) 50%, transparent); } .cta-band h2 { margin: 0 auto .3em; max-width: 760px; } /* Tables in page content */ .wp-block-table table { border-collapse: collapse; width: 100%; font-size: .95rem; } .wp-block-table th, .wp-block-table td { border: 0; border-bottom: 1px solid var(--line); padding: 12px 10px; text-align: left; vertical-align: top; } .wp-block-table thead th { color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line-strong); } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); background: var(--bg-deep); } .footer-grid { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--gutter) 32px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; box-sizing: border-box; } .footer-about p { color: var(--muted); max-width: 300px; margin-top: 14px; font-size: .95rem; } .site-footer h2 { font-family: var(--body, inherit); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 6px 0 14px; font-weight: 600; font-family: var(--wp--preset--font-family--body); } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin: 0 0 10px; } .site-footer li a { color: var(--text); text-decoration: none; } .site-footer li a:hover { color: var(--accent); } .site-footer li span { color: var(--muted); font-size: .85rem; } .footer-bottom { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 20px var(--gutter) 40px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); box-sizing: border-box; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: 1 / -1; } } /* 404 */ .not-found { text-align: center; padding-block: 10vh; } .not-found h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); } /* Reveal on scroll (site.js adds .in; without JS or with reduced motion everything shows) */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } } /* Phones: no horizontal scroll, columns stack */ @media (max-width: 600px) { .wp-block-columns { gap: 16px !important; } .hero h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); } .phone-pair > .is-phone:nth-child(2) { margin-top: 28px !important; } .privacy-list li { padding: 12px 8px; font-size: .9rem; } } .wp-block-columns > .wp-block-column { min-width: 0; } /* Editor: same frame */ .editor-styles-wrapper { background: var(--bg); color: var(--text); } /* ---------- Language dropdown (header), like sridu.com ---------- */ .ico { width: 18px; height: 18px; flex: none; } .lang-menu { position: relative; } .lang-menu summary { list-style: none; cursor: pointer; height: 36px; padding: 0 8px 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .06em; transition: color .15s, border-color .15s; } .lang-menu summary::-webkit-details-marker { display: none; } .lang-menu summary:hover, .lang-menu[open] summary { color: var(--text); border-color: var(--line-strong); } .lang-menu summary .ico { width: 15px; height: 15px; } .lang-menu summary .ico:last-child { width: 13px; height: 13px; transition: transform .2s; } .lang-menu[open] summary .ico:last-child { transform: rotate(180deg); } .lang-list { list-style: none; margin: 0; padding: 6px; position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; z-index: 60; box-shadow: var(--shadow-pop); } .lang-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: .9rem; } .lang-list a:hover { background: var(--surface-2); } .lang-list b { white-space: nowrap; font-size: .75rem; font-weight: 600; letter-spacing: .08em; color: var(--muted); } .lang-list a[aria-current="true"], .lang-list a[aria-current="true"] b { color: var(--accent); } /* Theme: header button + footer choice */ .theme-toggle { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; transition: color .15s, border-color .15s; } .theme-toggle:hover { color: var(--text); border-color: var(--line-strong); } .theme-toggle .ico { width: 17px; height: 17px; grid-area: 1 / 1; } .theme-toggle .ico-moon { display: none; } :root[data-theme="light"] .theme-toggle .ico-sun { display: none; } :root[data-theme="light"] .theme-toggle .ico-moon { display: block; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme-toggle .ico-sun { display: none; } :root:not([data-theme="dark"]) .theme-toggle .ico-moon { display: block; } } .theme-choice { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } .theme-choice-label { margin-right: 6px; } .theme-choice button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: .85rem; cursor: pointer; } .theme-choice button .ico { width: 15px; height: 15px; } .theme-choice button:hover { color: var(--text); } .theme-choice button[aria-pressed="true"] { color: var(--text); border-color: var(--line-strong); background: var(--surface); } .footer-bottom { flex-wrap: wrap; gap: 14px; } .lang-switch { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; } .lang-switch a { color: var(--muted); text-decoration: none; } .lang-switch a[aria-current="true"] { color: var(--text); } @media (max-width: 560px) { .lang-menu summary .ico:first-child { display: none; } } /* ---------- Card icons: one-colour line icons drawn with CSS masks (editor-safe: just a class) ---------- */ .card[class*="icon-"]::before { content: ""; display: block; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 16px; background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); -webkit-mask: none; background-image: none; } .card[class*="icon-"] { position: relative; } .card[class*="icon-"]::after { content: ""; position: absolute; top: 38px; left: 36px; width: 24px; height: 24px; background: var(--accent); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } .icon-lock { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%2211%22%20width%3D%2214%22%20height%3D%2210%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%2011V8a4%204%200%200%201%208%200v3%22/%3E%3C/svg%3E"); } .icon-eye-off { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203l18%2018%22/%3E%3Cpath%20d%3D%22M10.6%205.1A9.8%209.8%200%200%201%2012%205c5%200%209%204.5%2010%207a13%2013%200%200%201-3.2%204.3M6.6%206.6C4.3%208%202.7%2010.1%202%2012c1%202.5%205%207%2010%207%201.8%200%203.4-.5%204.8-1.3%22/%3E%3Cpath%20d%3D%22M9.9%209.9a3%203%200%200%200%204.2%204.2%22/%3E%3C/svg%3E"); } .icon-tag { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012V4a1%201%200%200%201%201-1h8l9%209-9%209z%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%221.5%22/%3E%3C/svg%3E"); } .icon-tool { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a4%204%200%200%200-5.4%205.4L3%2018l3%203%206.3-6.3a4%204%200%200%200%205.4-5.4l-2.5%202.5-2.4-.6-.6-2.4z%22/%3E%3C/svg%3E"); } .icon-check { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M8%2012.5l2.7%202.7L16%209.8%22/%3E%3C/svg%3E"); } .icon-dial { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22/%3E%3Cpath%20d%3D%22M12%208v8M8%2012h8%22/%3E%3C/svg%3E"); } .icon-heart { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020s-7-4.4-7-10a4%204%200%200%201%207-2.6A4%204%200%200%201%2019%2010c0%205.6-7%2010-7%2010z%22/%3E%3C/svg%3E"); } .icon-timer { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%228%22/%3E%3Cpath%20d%3D%22M12%209v4l3%202M9%202h6%22/%3E%3C/svg%3E"); } .icon-home { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011l9-7%209%207%22/%3E%3Cpath%20d%3D%22M5%2010v10h14V10%22/%3E%3Cpath%20d%3D%22M10%2020v-6h4v6%22/%3E%3C/svg%3E"); } .icon-stack { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%2212%22%20height%3D%224%22%20rx%3D%221%22/%3E%3Crect%20x%3D%226%22%20y%3D%229%22%20width%3D%2212%22%20height%3D%224%22%20rx%3D%221%22/%3E%3Crect%20x%3D%226%22%20y%3D%2215%22%20width%3D%2212%22%20height%3D%224%22%20rx%3D%221%22/%3E%3Cpath%20d%3D%22M12%201v2M18%2011h3%22/%3E%3C/svg%3E"); } .icon-sprout { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021v-9%22/%3E%3Cpath%20d%3D%22M12%2012C12%208%209%205%204%205c0%204%203%207%208%207z%22/%3E%3Cpath%20d%3D%22M12%2014c0-3%202.5-6%207-6%200%203.5-2.5%206-7%206z%22/%3E%3C/svg%3E"); } .icon-return { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012a8%208%200%201%200%202.3-5.6%22/%3E%3Cpath%20d%3D%22M4%204v4h4%22/%3E%3C/svg%3E"); } .icon-chat { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v11H9l-5%204z%22/%3E%3Cpath%20d%3D%22M8%209h8M8%2012h5%22/%3E%3C/svg%3E"); } .icon-sound { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209v6h4l5%204V5L8%209z%22/%3E%3Cpath%20d%3D%22M16.5%208.5a5%205%200%200%201%200%207M19%206a8.5%208.5%200%200%201%200%2012%22/%3E%3C/svg%3E"); } .icon-play { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%227%22%20width%3D%2219%22%20height%3D%2211%22%20rx%3D%225%22/%3E%3Cpath%20d%3D%22M7%2011v3M5.5%2012.5h3%22/%3E%3Ccircle%20cx%3D%2215.5%22%20cy%3D%2211.5%22%20r%3D%22.8%22/%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2213.5%22%20r%3D%22.8%22/%3E%3C/svg%3E"); } /* ---------- Where the apps run: chips on the cards, table on the hub ---------- */ .app-runs { list-style: none; margin: auto 0 .6em; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .app-runs li { font-size: .78rem; font-weight: 600; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text); } .app-runs + .app-platform { margin-top: 0; } .platforms { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .platforms table { width: 100%; border-collapse: collapse; font-size: .95rem; } .platforms th, .platforms td { padding: 16px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; } .platforms tbody tr:last-child > * { border-bottom: 0; } .platforms thead th { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .platforms tbody th a { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--text); text-decoration: none; border-left: 4px solid var(--card-accent); padding-left: 10px; } .platforms tbody th span { display: block; color: var(--muted); font-size: .82rem; font-weight: 400; padding-left: 14px; } .platforms td span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .platforms td span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; } .platforms td.is-yes span::before { background: var(--accent); } .platforms td.is-web span::before { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); } .platforms td.is-later span::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); } .platforms td.is-later, .platforms td.is-no { color: var(--muted); } .platforms td.is-no span::before { width: 10px; height: 2px; border-radius: 1px; background: var(--line-strong); } @media (max-width: 760px) { .platforms { overflow: visible; border: 0; background: transparent; } .platforms thead { display: none; } .platforms table, .platforms tbody, .platforms tr, .platforms th, .platforms td { display: block; } .platforms tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; padding: 6px 4px; } .platforms td { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; } .platforms td::before { content: attr(data-label); color: var(--muted); } .platforms tbody th { border-bottom: 1px solid var(--line); } } /* ======================= Hub, round 2: visual first ======================= */ /* Devices */ .dev { display: block; position: relative; overflow: hidden; background: #0b0a0a; } .dev img { display: block; width: 100%; height: auto; } .dev-phone { border-radius: 13% / 6%; border: 7px solid #0b0a0a; box-shadow: 0 0 0 1.5px #3b3733, 0 30px 60px -18px rgba(0, 0, 0, .55); } .dev-phone img { border-radius: 10% / 4.6%; } .dev-browser { border-radius: 14px; box-shadow: 0 0 0 1px #3b3733, 0 30px 70px -20px rgba(0, 0, 0, .55); } .dev-chrome { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #201e1c; border-bottom: 1px solid #34312d; } .dev-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #4a4540; } .dev-chrome b { margin-left: 12px; flex: 1; max-width: 60%; height: 18px; border-radius: 6px; background: #161514; color: #a39d92; font: 500 .68rem/18px var(--wp--preset--font-family--body, sans-serif); padding: 0 10px; overflow: hidden; white-space: nowrap; } /* Hero showcase: browser behind, phones in front */ .hero-hub .wp-block-columns { align-items: center !important; } .showcase { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1 / .86; margin-left: auto; } .showcase::before { content: ""; position: absolute; inset: 10% 0 0 10%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent 75%); filter: blur(20px); z-index: 0; } .sc-item { position: absolute; display: block; text-decoration: none; color: var(--text); z-index: 1; transition: transform .35s ease; } .sc-item:hover { transform: translateY(-6px); z-index: 3; } .sc-browser { left: 0; top: 4%; width: 80%; } .sc-phone { width: 29%; z-index: 2; } .sc-p1 { right: 0; bottom: 0; } .sc-p2 { right: 31%; bottom: 7%; } .sc-p3 { right: 62%; bottom: 3%; } .sc-tag { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: .02em; white-space: nowrap; } .sc-tag img { width: 22px; height: 22px; border-radius: 6px; } .sc-browser .sc-tag { top: auto; bottom: -14px; left: 22px; transform: none; } @media (prefers-reduced-motion: no-preference) { .sc-p1 .dev { animation: hohl-float 7s ease-in-out infinite; } .sc-p2 .dev { animation: hohl-float 7s ease-in-out -2.3s infinite; } .sc-browser .dev { animation: hohl-float 9s ease-in-out -4s infinite; } } @keyframes hohl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .hero-hub h1 { font-size: clamp(3rem, 7vw, 5.25rem); } .hero-hub .lead { max-width: 480px; } .hero-hub .wp-block-buttons { margin-top: 1.6rem; } @media (max-width: 781px) { .showcase { margin: 24px auto 0; max-width: 520px; } } @media (max-width: 480px) { .sc-tag { font-size: .85rem; padding: 3px 9px 3px 3px; } .sc-tag img { width: 18px; height: 18px; } .dev-chrome { height: 22px; } .dev-chrome b { display: none; } } /* Principles strip: icon + a few words */ .principles { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px !important; } .principles > p { margin: 0 !important; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; font-weight: 600; line-height: 1.3; } .principles > p::before { content: ""; width: 22px; height: 22px; flex: none; background: var(--accent); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } @media (max-width: 860px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { .principles { grid-template-columns: minmax(0, 1fr); } } /* App tiles */ .app-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; } .app-tile { display: flex; flex-direction: column; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; } .app-tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--card-accent) 55%, var(--line)); box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--card-accent) 60%, transparent); } .tile-stage { display: block; position: relative; height: 230px; overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--card-accent) 55%, transparent), color-mix(in srgb, var(--card-accent) 10%, var(--surface-2)) 70%); } .tile-stage .dev-phone { position: absolute; left: 50%; top: 28px; width: 46%; transform: translateX(-50%); transition: transform .35s; } .tile-stage.stage-browser .dev-browser { position: absolute; left: 10%; top: 50px; width: 92%; transition: transform .35s; } .app-tile:hover .tile-stage .dev-phone { transform: translateX(-50%) translateY(-8px); } .app-tile:hover .tile-stage .dev-browser { transform: translateY(-8px); } .tile-stage .app-status { position: absolute; left: 14px; top: 14px; z-index: 2; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--text); } .tile-body { display: flex; align-items: center; gap: 14px; padding: 20px 22px 0; } .tile-body .app-icon { width: 52px; height: 52px; border-radius: 13px; flex: none; } .tile-text { display: flex; flex-direction: column; min-width: 0; flex: 1; } .tile-kind { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--card-accent); } .tile-name { font-family: var(--display); font-weight: 700; font-size: 1.9rem; line-height: 1; margin: 2px 0 4px; } .tile-line { color: var(--text-2); font-size: .95rem; line-height: 1.35; } .tile-go { font-size: 1.4rem; color: var(--muted); transition: transform .2s, color .2s; } .app-tile:hover .tile-go { color: var(--card-accent); transform: translateX(4px); } .app-tile .app-runs { margin: 16px 22px 22px; } /* SEO block: calmer text columns */ .about-apps .wp-block-columns { gap: 32px !important; } .about-apps h3 { font-size: 1.6rem; margin: 0 0 .4em; } .about-apps h3 a { text-decoration: none; } .about-apps p { color: var(--text-2); } .about-apps .platforms { margin-top: 32px; } /* Phones: the header keeps brand, language, theme and menu; the call to action lives in the page */ @media (max-width: 560px) { .site-header .bar-end > .btn { display: none; } .brand-wrap { flex: 1; } } .about-apps .section-inner > h2 { margin-top: clamp(48px, 7vw, 80px); } .icon-list { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206h11M9%2012h11M9%2018h11%22%2F%3E%3Ccircle%20cx%3D%224.5%22%20cy%3D%226%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%224.5%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%224.5%22%20cy%3D%2218%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E"); } .icon-watch { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M9%206l.7-3h4.6L15%206M9%2018l.7%203h4.6l.7-3M12%209.5V12l1.5%201.5%22%2F%3E%3C%2Fsvg%3E"); } .icon-shield { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l7%203v5c0%204.6-3%208.3-7%2010-4-1.7-7-5.4-7-10V6l7-3z%22%2F%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22%2F%3E%3C%2Fsvg%3E"); } .icon-search { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%226.5%22%2F%3E%3Cpath%20d%3D%22M16%2016l4.5%204.5%22%2F%3E%3C%2Fsvg%3E"); } /* ======================= DCFT site: complete ======================= */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* Exercise figures exist twice, one per colour scheme */ .fig-l { display: none !important; } :root[data-theme="light"] .fig-d { display: none !important; } :root[data-theme="light"] .fig-l { display: block !important; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .fig-d { display: none !important; } :root:not([data-theme="dark"]) .fig-l { display: block !important; } } picture.fig-d, picture.fig-l { display: block; } picture img { display: block; width: 100%; height: auto; } /* Header: search button */ .search-btn { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; transition: color .15s, border-color .15s; } .search-btn:hover { color: var(--text); border-color: var(--line-strong); } .main-nav a[aria-current="page"] { color: var(--text); background: var(--surface); } .menu-panel a[aria-current="page"] { color: var(--accent); } /* Search dialog */ .search-dialog { width: min(680px, calc(100vw - 24px)); max-height: min(78vh, 720px); margin: 10vh auto auto; padding: 0; border: 1px solid var(--line-strong); border-radius: 22px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); overflow: hidden; display: none; flex-direction: column; } .search-dialog[open] { display: flex; animation: hohl-pop .18s ease-out; } .search-dialog::backdrop { background: rgba(10, 9, 8, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } @keyframes hohl-pop { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } } .search-form { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line); color: var(--muted); } .search-form input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1.15rem; padding: 8px 0; outline: none; } .search-form input::-webkit-search-cancel-button { display: none; } .search-close { border: 1px solid var(--line); background: var(--bg); color: var(--muted); border-radius: 8px; padding: 3px 8px; cursor: pointer; font: inherit; font-size: .75rem; } .search-results { overflow-y: auto; padding: 8px 10px 14px; } .search-tip { color: var(--muted); padding: 14px 12px; margin: 0; font-size: .95rem; } .sr-group { font-family: var(--display); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; color: var(--accent); margin: 14px 12px 6px; } .search-results ul { list-style: none; margin: 0; padding: 0; } .search-results li a { display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--text); } .search-results li a:hover, .search-results li a.is-active { background: var(--surface-2); } .search-results strong { display: block; font-weight: 600; } .search-results span { display: block; color: var(--muted); font-size: .9rem; line-height: 1.45; margin-top: 2px; } .sr-faq span { color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .sr-ex a { display: grid !important; grid-template-columns: 48px 1fr; column-gap: 12px; align-items: center; } .sr-ex img { grid-row: span 2; width: 48px; height: 48px; border-radius: 10px; background: #161514; } .sr-more, .sr-empty { margin: 10px 12px 0; font-size: .9rem; color: var(--muted); } .sr-more a, .sr-empty a { color: var(--accent); } @media (max-width: 600px) { .search-dialog { margin-top: 12px; max-height: calc(100vh - 24px); } } /* Search results page */ .search-page .wp-block-search { margin: 1em 0 2em; } .search-page .wp-block-search__inside-wrapper { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); } .search-page .wp-block-search__input { border: 0; background: transparent; color: var(--text); padding: 12px 14px; font: inherit; } .search-page .wp-block-search__button { border: 0; background: var(--accent); color: var(--hohl-accent-ink); padding: 0 16px; margin: 0; } .search-list .wp-block-post-title { font-size: 1.4rem; margin: 1.6em 0 .2em; } .search-list .wp-block-post-title a { text-decoration: none; color: var(--text); } .search-list .wp-block-post-excerpt { color: var(--text-2); } .not-found.is-search { text-align: left; padding: 2em 0; } /* Start page hero: phone, a moving figure and two notes */ .dcft-hero .hero-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; } .dcft-hero .hero-actions .get-app { margin-top: 0; } .hero-actions .wp-block-buttons { margin: 0 !important; } .hero-actions { margin-top: 1.75rem !important; } .hero-stage { position: relative; max-width: 520px; margin-left: auto !important; padding: 20px 0 40px; } .hero-stage > .is-phone { max-width: 300px; margin: 0 auto 0 18% !important; } .float-fig { position: absolute; left: -2%; bottom: 12%; width: 46%; aspect-ratio: 1; border-radius: 26px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); z-index: 2; background: var(--bg); margin: 0 !important; } .float-fig figure { margin: 0; } .float-chip { position: absolute; z-index: 3; margin: 0 !important; display: inline-flex; flex-direction: column; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); font-size: .82rem; color: var(--muted); line-height: 1.25; } .float-chip strong { font-family: var(--display); font-size: 1.6rem; color: var(--text); line-height: 1; } .float-chip.is-pin { right: 0; top: 18%; } .float-chip.is-pin strong { color: var(--accent); } .float-chip.is-rest { right: 4%; bottom: 8%; } @media (prefers-reduced-motion: no-preference) { .hero-stage > .is-phone img { animation: hohl-float 8s ease-in-out infinite; } .float-chip.is-pin { animation: hohl-float 6s ease-in-out -1.5s infinite; } .float-chip.is-rest { animation: hohl-float 7s ease-in-out -3s infinite; } .float-fig { animation: hohl-float 9s ease-in-out -5s infinite; } } @media (max-width: 781px) { .hero-stage { margin: 8px auto 0 !important; max-width: 420px; } .hero-stage > .is-phone { max-width: 240px; margin-left: 24% !important; } .float-chip strong { font-size: 1.3rem; } } /* Steps with a screen each */ .step-cards { gap: 16px !important; } .step-cards > .wp-block-column { display: flex; } .step-card { flex: 1; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 0 0 22px !important; overflow: hidden; transition: transform .25s, border-color .25s; } .step-card:hover { transform: translateY(-4px); border-color: var(--line-strong); } .step-shot { margin: 0 0 18px !important; height: 210px; overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); padding-top: 22px; box-sizing: border-box; } .step-shot img { display: block; width: 62%; margin: 0 auto; border-radius: 22px 22px 0 0; border: 6px solid #0b0a0a; border-bottom: 0; box-shadow: 0 0 0 1px #3b3733; transition: transform .35s; } .step-card:hover .step-shot img { transform: translateY(-6px); } .step-no { position: absolute; top: 14px; left: 16px; margin: 0 !important; font-family: var(--display); font-weight: 700; font-size: 1rem; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--hohl-accent-ink); } .step-card h3 { font-size: 1.35rem; margin: 0 20px .3em; } .step-card p:not(.step-no) { margin: 0 20px; color: var(--text-2); line-height: 1.5; font-size: .95rem; } @media (max-width: 1000px) { .step-cards { flex-wrap: wrap !important; } .step-cards > .wp-block-column { flex-basis: calc(50% - 8px) !important; } } @media (max-width: 560px) { .step-cards > .wp-block-column { flex-basis: 100% !important; } .step-shot { height: 180px; } } /* Chips list and "more" link in feature rows */ .feature ul.chips-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.2em 0; } .feature ul.chips-list li { margin: 0; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text); font-size: .92rem; font-weight: 500; } .feature ul.chips-list li::before { display: none; } a.more { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; color: var(--accent); } a.more::after { content: " →"; display: inline-block; transition: transform .2s; } a.more:hover::after { transform: translateX(4px); } .feature h3 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 0 0 .3em; } /* Feature page: phones fanned out */ .phone-fan { position: relative; display: flex; justify-content: center; align-items: flex-start; } .phone-fan .is-phone { max-width: 270px; margin: 0 !important; flex: none; width: 70%; } .phone-fan.n2 .is-phone, .phone-fan.n3 .is-phone { width: 58%; } .phone-fan.n2 .is-phone:nth-child(2) { margin: 48px 0 0 -18% !important; z-index: 0; transform: rotate(4deg); } .phone-fan.n2 .is-phone:nth-child(1), .phone-fan.n3 .is-phone:nth-child(1) { z-index: 2; position: relative; } .phone-fan.n3 .is-phone:nth-child(2) { margin: 40px 0 0 -26% !important; transform: rotate(4deg); z-index: 1; } .phone-fan.n3 .is-phone:nth-child(3) { margin: 80px 0 0 -26% !important; transform: rotate(8deg); z-index: 0; } .feature .feature-media .phone-fan .is-phone { max-width: 260px; } .feature ul.ticks li::before { width: 14px; height: 8px; border-radius: 0; background: none; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); top: .45em; } .feature h2 { font-size: clamp(2rem, 4vw, 3rem); } /* Page heroes (all pages but the start page) */ .page-hero { padding-block: clamp(28px, 5vw, 64px) clamp(36px, 6vw, 72px); position: relative; overflow: hidden; border-bottom: 1px solid var(--line); } .page-hero::before { content: ""; position: absolute; inset: -40% -10% auto 45%; height: 560px; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 18%, transparent), transparent); pointer-events: none; } .page-hero > * { position: relative; } .page-hero-inner { max-width: var(--wide); margin-inline: auto !important; } .page-hero h1 { font-size: clamp(2.6rem, 6.5vw, 4.75rem); line-height: .98; margin: .1em 0 .3em; max-width: 16ch; } .page-hero .lead { max-width: 640px; } .page-hero .breadcrumbs { margin-bottom: 18px; } .page-hero-media .is-phone { max-width: 280px; } .page-hero-media .is-watch { max-width: 240px; margin: 0 auto !important; } .is-watch img { display: block; width: 100%; border-radius: 26%; } .toc-chips { display: flex !important; flex-wrap: wrap; gap: 8px; justify-content: center; } .toc-chips p { margin: 0 !important; } .toc-chips a { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); text-decoration: none; font-size: .9rem; font-weight: 500; transition: border-color .15s, color .15s; } .toc-chips a:hover { color: var(--text); border-color: var(--accent); } .cards .card.is-link h3 a { color: var(--text); text-decoration: none; } .cards .card.is-link h3 a::after { content: ""; position: absolute; inset: 0; } .cards .card.is-link { transition: transform .2s, border-color .2s; } .cards .card.is-link:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); } .prose { max-width: 760px; margin-inline: auto !important; } .prose h2 { margin-top: 1.4em; } .prose h2:first-child { margin-top: 0; } .prose p, .prose li { color: var(--text-2); line-height: 1.6; } .prose ul.ticks { padding-left: 0; list-style: none; } .prose ul.ticks li, .page-hero + .section ul.ticks li { position: relative; padding-left: 26px; margin: .5em 0; } .prose ul.ticks li::before, .feature ul.ticks li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 14px; height: 8px; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); } /* Exercise strip on the start page */ .ex-band { overflow: hidden; } .ex-marquee { display: grid; gap: 14px; margin: 0 calc(50% - 50vw) 32px; } .marquee-row { display: flex; width: max-content; } .marquee-row ul { list-style: none; margin: 0; padding: 0 7px; display: flex; gap: 14px; } .marquee-row li a { display: block; width: 180px; text-decoration: none; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: border-color .2s, transform .2s; } .marquee-row li a:hover { border-color: var(--accent); transform: translateY(-3px); } .marquee-row .ex-stage { display: block; aspect-ratio: 1; } .marquee-row .ex-stage img { display: block; width: 100%; height: 100%; } .marquee-row .ex-name { display: block; padding: 10px 12px 12px; font-weight: 600; font-size: .9rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--line); } @media (prefers-reduced-motion: no-preference) { .marquee-row { animation: hohl-marquee 70s linear infinite; } .marquee-row.is-reverse { animation-direction: reverse; animation-duration: 80s; } .ex-marquee:hover .marquee-row { animation-play-state: paused; } } @media (prefers-reduced-motion: reduce) { .ex-marquee { overflow-x: auto; } .marquee-row ul[aria-hidden] { display: none; } } @keyframes hohl-marquee { to { transform: translateX(-50%); } } /* Exercise library */ .ex-tools { position: sticky; top: 65px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 0; margin-bottom: 18px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .admin-bar .ex-tools { top: 98px; } .ex-search { flex: 1 1 260px; display: flex; } .ex-search input, .faq-filter input { width: 100%; box-sizing: border-box; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: 14px; padding: 12px 16px 12px 44px; font: inherit; font-size: 1rem; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23a39d92%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%226.5%22/%3E%3Cpath%20d%3D%22M16%2016l4.5%204.5%22/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 20px; } .ex-search input:focus, .faq-filter input:focus { outline: none; border-color: var(--accent); } .ex-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; order: 3; } .ex-chips .chip { cursor: pointer; font: inherit; font-size: .88rem; font-weight: 500; transition: border-color .15s, background-color .15s, color .15s; } .ex-chips .chip span { color: var(--muted); font-size: .78rem; margin-left: 2px; } .ex-chips .chip:hover { border-color: var(--line-strong); color: var(--text); } .ex-chips .chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--hohl-accent-ink); } .ex-chips .chip.is-on span { color: inherit; opacity: .75; } .ex-basic { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: .92rem; cursor: pointer; } .ex-basic input { accent-color: var(--accent); width: 18px; height: 18px; } .ex-count { margin: 0; color: var(--muted); font-size: .9rem; margin-left: auto; } .ex-group { margin-top: 36px; scroll-margin-top: 220px; } .ex-group h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin: 0 0 16px; display: flex; align-items: baseline; gap: 10px; } .ex-group h2 .count { font-size: 1rem; color: var(--muted); font-family: var(--wp--preset--font-family--body, sans-serif); font-weight: 500; } .ex-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; } .ex-card a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s; } .ex-card a:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 20px 40px -24px color-mix(in srgb, var(--accent) 60%, transparent); } .ex-card .ex-stage { display: block; aspect-ratio: 1; background: var(--bg); border-bottom: 1px solid var(--line); } .ex-card .ex-stage img { display: block; width: 100%; height: 100%; } .ex-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; } .ex-name { font-weight: 600; line-height: 1.25; } .ex-meta { color: var(--muted); font-size: .85rem; } .ex-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 6px; } .ex-tags span { font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); } .ex-none { color: var(--muted); padding: 32px 0; text-align: center; } .ex-grid.is-related { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); margin-top: 20px; } @media (max-width: 560px) { .ex-tools { top: 57px; padding: 10px 0; } .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ex-body { padding: 10px 11px 12px; } .ex-name { font-size: .92rem; } .ex-tags span:last-child { display: none; } .ex-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } .ex-chips .chip { flex: none; } .ex-count { margin-left: 0; } } /* One exercise */ .ex-hero .page-hero-media { max-width: 460px; } .ex-hero-fig { margin: 0; border-radius: 28px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--bg); box-shadow: var(--shadow-pop); } .ex-hero h1 { font-size: clamp(2.4rem, 6vw, 4.25rem); max-width: 18ch; } .ex-detail { gap: clamp(28px, 5vw, 72px) !important; } .ex-detail h2 { margin-top: 0; font-size: clamp(1.8rem, 3.5vw, 2.4rem); } .cue-list { list-style: none; padding: 0; margin: 0 0 24px; counter-reset: cue; } .cue-list li { counter-increment: cue; position: relative; padding: 14px 0 14px 52px; border-top: 1px solid var(--line); color: var(--text-2); line-height: 1.5; } .cue-list li:last-child { border-bottom: 1px solid var(--line); } .cue-list li::before { content: counter(cue); position: absolute; left: 0; top: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.15rem; background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color: var(--accent); } .tip-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 16px; padding: 18px 20px !important; } .tip-card p:last-child { margin: 0; color: var(--text-2); line-height: 1.55; } .setup-table table { font-size: .95rem; } .setup-table td:first-child { color: var(--muted); width: 32%; white-space: nowrap; } .setup-table thead { display: none; } .ex-map { margin: 24px 0 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 10px; } .ex-map img { display: block; width: 100%; height: auto; } .ex-map figcaption { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; font-size: .82rem; color: var(--muted); padding: 6px 0 4px; } .ex-map figcaption span { display: inline-flex; align-items: center; gap: 6px; } .ex-map .k-hot::before, .ex-map .k-warm::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: #ff5a1f; } .ex-map .k-warm::before { background: #e4a68b; } .muscle-list { list-style: none; padding: 0; margin: 8px 0 0; color: var(--text-2); } .muscle-list li { margin: 4px 0; } .note-card { max-width: 820px; margin-inline: auto !important; position: relative; display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px !important; } .note-card::before { content: ""; flex: none; width: 24px; height: 24px; margin-top: 2px; background: var(--accent); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } .note-card p { margin: 0; color: var(--text-2); } .cta-band.is-left { text-align: left; max-width: 820px; margin-inline: auto !important; } .cta-band.is-left h2 { margin-left: 0; } .cta-band .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; } .cta-band .hero-actions .get-app { margin-top: 0; } /* Sample plans */ .pl-who { color: var(--text-2); max-width: 760px; font-size: 1.05rem; } .pl-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; margin-top: 20px; } .pl-day { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 20px; } .pl-day h3 { margin: 0 0 12px; font-size: 1.6rem; display: flex; flex-direction: column; } .pl-day h3 span { font-family: var(--wp--preset--font-family--body, sans-serif); font-size: .85rem; font-weight: 500; color: var(--muted); } .pl-day ol { list-style: none; margin: 0; padding: 0; } .pl-day li { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); } .ex-thumb { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: var(--bg); display: block; } .ex-thumb img { display: block; width: 100%; height: 100%; } .pl-name a { color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.25; } .pl-name a:hover { color: var(--accent); } .pl-name small, .pl-dose small { display: block; color: var(--muted); font-size: .78rem; } .pl-dose { text-align: right; white-space: nowrap; } .pl-dose strong { font-family: var(--display); font-size: 1.25rem; } .pl-time { margin: 10px 0 0; color: var(--muted); font-size: .85rem; } .pl-note { color: var(--muted); font-size: .9rem; margin-top: 16px; } /* Free vs Pro table */ .compare-table { max-width: 860px; margin-inline: auto !important; } .compare-table td:not(:first-child), .compare-table th:not(:first-child) { text-align: center; width: 18%; } .compare-table .yes { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 20%, transparent); color: transparent; overflow: hidden; position: relative; vertical-align: middle; } .compare-table .yes::after { content: ""; position: absolute; left: 6px; top: 6px; width: 9px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } .compare-table .no { color: var(--muted); } /* FAQ page */ .faq-tools .faq-filter { max-width: 820px; margin: 0 auto 18px; } .faq-filter-none { text-align: center; color: var(--muted); } .faq-group { max-width: 820px; margin-inline: auto !important; } .faq-group h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin: 0 0 8px; scroll-margin-top: 90px; } .faq details.is-target summary { color: var(--accent); } /* Pulley ratio calculator */ .ratio-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: clamp(18px, 3vw, 28px); margin: 1.2em 0 2em; } .rc-inputs { display: grid; gap: 14px; } .rc-inputs label { display: grid; gap: 6px; font-size: .9rem; color: var(--muted); } .rc-inputs input, .rc-inputs select { font: inherit; font-size: 1.05rem; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 12px; width: 100%; box-sizing: border-box; } .rc-field { display: grid; grid-template-columns: 1fr 84px; gap: 8px; } .rc-out { display: flex; flex-direction: column; justify-content: center; text-align: center; background: var(--bg); border-radius: 18px; padding: 18px; } .rc-big { font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 8vw, 4.5rem); line-height: 1; margin: 0; color: var(--accent); } .rc-cap { margin: 4px 0 12px; color: var(--muted); } .rc-line { margin: 0 0 12px; color: var(--text-2); font-size: .92rem; } .rc-bar { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .rc-bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s; } .rc-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .9rem; } @media (max-width: 640px) { .ratio-calc { grid-template-columns: 1fr; } } /* fixes after the first look */ .dcft-hero .get-app-note { display: none; } .dcft-hero .hero-actions { align-items: center; } .phone-fan.n3 .is-phone { width: 46%; } .phone-fan.n3 .is-phone:nth-child(2), .phone-fan.n3 .is-phone:nth-child(3) { margin-left: -24% !important; } .is-watch { max-width: 230px; margin: 0 auto !important; } .is-watch img { border-radius: 30%; border: 10px solid #0b0a0a; box-shadow: 0 0 0 1.5px #3b3733, 0 30px 60px -18px rgba(0, 0, 0, .6), 0 0 120px -40px color-mix(in srgb, var(--accent) 45%, transparent); box-sizing: border-box; background: #000; } .feature .feature-media .is-watch { max-width: 230px; } .ex-faq-h { text-align: center; } .site-header .btn { white-space: nowrap; } @media (max-width: 1120px) and (min-width: 901px) { .site-header .bar-end > .btn { display: none; } .main-nav a { padding: 8px 9px; } } .privacy-list li:nth-child(1)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M5%2020c.8-3.6%203.6-5.5%207-5.5s6.2%201.9%207%205.5%22%2F%3E%3Cpath%20d%3D%22M3%203l18%2018%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M5%2020c.8-3.6%203.6-5.5%207-5.5s6.2%201.9%207%205.5%22%2F%3E%3Cpath%20d%3D%22M3%203l18%2018%22%2F%3E%3C%2Fsvg%3E"); } .privacy-list li:nth-child(2)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2214%22%20width%3D%2216%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M8%207h.01M8%2017h.01%22%2F%3E%3Cpath%20d%3D%22M3%203l18%2018%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2214%22%20width%3D%2216%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M8%207h.01M8%2017h.01%22%2F%3E%3Cpath%20d%3D%22M3%203l18%2018%22%2F%3E%3C%2Fsvg%3E"); } .privacy-list li:nth-child(3)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2010v4h3l6%204V6L7%2010H4z%22%2F%3E%3Cpath%20d%3D%22M17%209.5a4%204%200%200%201%200%205%22%2F%3E%3Cpath%20d%3D%22M3%203l18%2018%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2010v4h3l6%204V6L7%2010H4z%22%2F%3E%3Cpath%20d%3D%22M17%209.5a4%204%200%200%201%200%205%22%2F%3E%3Cpath%20d%3D%22M3%203l18%2018%22%2F%3E%3C%2Fsvg%3E"); } .privacy-list li:nth-child(4)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.5%2012S6%205.5%2012%205.5%2021.5%2012%2021.5%2012%2018%2018.5%2012%2018.5%202.5%2012%202.5%2012z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%203l18%2018%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.5%2012S6%205.5%2012%205.5%2021.5%2012%2021.5%2012%2018%2018.5%2012%2018.5%202.5%2012%202.5%2012z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%203l18%2018%22%2F%3E%3C%2Fsvg%3E"); } .privacy-list li::before { width: 28px; height: 28px; margin-bottom: 10px; } .privacy-list li { padding: 20px 16px; } /* ======================= Round 3: everything moves ======================= */ /* Live phone: the frame sits on the screen box, overlays are placed in % of the screenshot */ .live-phone { max-width: 300px; } .live-phone .live-screen { position: relative; display: block; overflow: hidden; border-radius: 42px; border: 9px solid #0b0a0a; background: #0b0a0a; box-shadow: 0 0 0 1.5px #3b3733, 0 40px 80px -20px rgba(0, 0, 0, .75), 0 0 120px -40px color-mix(in srgb, var(--accent) 45%, transparent); } .is-phone.live-phone img, .live-phone .live-screen > img { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; display: block; width: 100%; height: auto; } .live-ov { position: absolute; aspect-ratio: 1; overflow: hidden; pointer-events: none; } .live-ov picture, .live-ov img { display: block; width: 100% !important; height: 100% !important; } .live-ov.is-tile { border-radius: 13%; background: #232120; display: flex; align-items: center; justify-content: center; } .live-ov.is-tile img { width: 90% !important; height: 90% !important; } .live-ov.is-dim img { filter: brightness(.45); } .hero-stage > .is-phone img { animation: none !important; } @media (prefers-reduced-motion: no-preference) { .hero-stage > .is-phone .live-screen { animation: hohl-float 8s ease-in-out infinite; } } .step-shot { padding-top: 22px; } .step-shot .live-phone { width: 62%; max-width: none; margin: 0 auto !important; } .step-shot .live-phone .live-screen { border-radius: 22px 22px 0 0; border-width: 6px 6px 0; box-shadow: 0 0 0 1px #3b3733; } .step-card:hover .step-shot .live-screen { transform: translateY(-6px); } .step-shot .live-screen { transition: transform .35s; } .phone-fan.n2 .is-phone, .phone-fan.n3 .is-phone { max-width: 270px; } /* Page heroes with a visual on the right */ .page-hero.has-media .hero-stage { max-width: 470px; } .page-hero.has-media .hero-stage > .is-phone { max-width: 270px; } .page-hero:not(.has-media) h1 { max-width: none; } .page-hero h1 { max-width: 20ch; } /* Apple Watch: set and rest take turns, the wrist taps */ .watch-stage { position: relative; max-width: 460px; margin: 0 auto; min-height: 380px; display: flex; align-items: center; justify-content: flex-end; } .watch-frame { position: relative; width: 58%; aspect-ratio: 416 / 496; border-radius: 30%; padding: 5.5%; background: linear-gradient(145deg, #3a3733, #121110 60%); box-shadow: 0 0 0 1.5px #4a4540, 0 40px 80px -24px rgba(0, 0, 0, .7), 0 0 120px -40px color-mix(in srgb, var(--accent) 50%, transparent); } .watch-crown { position: absolute; right: -4.5%; top: 26%; width: 5%; height: 15%; border-radius: 4px; background: linear-gradient(90deg, #2a2724, #5a554f); } .watch-screen { position: relative; display: block; width: 100%; height: 100%; border-radius: 24%; overflow: hidden; background: #000; } .watch-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .watch-screen .ws-b { opacity: 0; } .watch-tap { position: absolute; inset: -6%; border-radius: 34%; border: 2px solid var(--accent); opacity: 0; pointer-events: none; } .watch-fig { position: absolute; left: 0; bottom: 6%; width: 44%; aspect-ratio: 1; border-radius: 24px; overflow: hidden; background: var(--bg); border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); z-index: 2; } .watch-fig picture, .watch-fig img { display: block; width: 100%; height: 100%; } .watch-fig-cap { position: absolute; left: 10px; top: 8px; font-family: var(--display); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } @media (prefers-reduced-motion: no-preference) { .watch-screen .ws-b { animation: hohl-watch 9s ease-in-out infinite; } .watch-tap { animation: hohl-tap 9s ease-out infinite; } .watch-frame { animation: hohl-float 8s ease-in-out infinite; } .watch-fig { animation: hohl-float 7s ease-in-out -3s infinite; } } @keyframes hohl-watch { 0%, 42% { opacity: 0; } 48%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } } @keyframes hohl-tap { 0%, 90% { opacity: 0; transform: scale(1); } 93% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } } .feature .feature-media .watch-stage { max-width: 420px; } /* Wall of figures (library hero) */ .ex-collage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 520px; margin-left: auto; } .col-tile { display: block; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; overflow: hidden; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .6); transition: transform .25s, border-color .25s; } .col-tile:hover { border-color: var(--accent); } .col-tile .ex-stage { display: block; aspect-ratio: 1; background: var(--bg); } .col-tile .ex-stage picture, .col-tile .ex-stage img { display: block; width: 100%; height: 100%; } .col-name { display: block; font-size: .78rem; font-weight: 600; padding: 7px 10px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .col-tile.t2, .col-tile.t5 { transform: translateY(22px); } @media (prefers-reduced-motion: no-preference) { .col-tile.t1, .col-tile.t4 { animation: hohl-float 7s ease-in-out infinite; } .col-tile.t3, .col-tile.t6 { animation: hohl-float 8s ease-in-out -3s infinite; } } @media (max-width: 781px) { .ex-collage { margin: 8px auto 0; } .col-name { font-size: .7rem; } } /* Header: "by hohl.dev" under the name; no theme switch up here (it lives in the footer) */ .brand-wrap { position: relative; display: block; } .brand-wrap .brand .brand-name { position: relative; top: -6px; } .brand-by { position: absolute; left: 44px; top: 50%; margin-top: 3px; line-height: 1; font-size: .72rem; } .brand-wrap:has(.is-hub) .brand-name { top: 0; } /* Library tools: tight under the header, never wider than the page */ .ex-tools { top: 64px; padding: 10px 0; margin-inline: 0; max-width: 100%; box-sizing: border-box; } .ex-tools > * { min-width: 0; } .ex-search { flex: 1 1 240px; } .ex-chips { flex-wrap: wrap; } /* Plan tabs wrap instead of running out of the page */ /* Apple Watch frame (Ultra-sized screens 422 x 514), screens fade into each other */ .watch-frame { width: 58%; aspect-ratio: 422 / 514; border-radius: 26%; padding: 6%; } .watch-screen { border-radius: 20%; } .watch-screen .ws { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; } .watch-screen .ws.is-on { opacity: 1; } .watch-screen .ws-b { animation: none !important; } .watch-tap { animation: none !important; } .watch-button { position: absolute; right: -3.6%; top: 50%; width: 3.6%; height: 18%; border-radius: 3px; background: linear-gradient(90deg, #24211e, #48433d); } .watch-frame.is-tap { animation: hohl-buzz .5s linear 2; } .watch-frame.is-tap .watch-tap { animation: hohl-tap2 1s ease-out 1 !important; } @keyframes hohl-buzz { 0%, 100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-3px) rotate(-1deg); } 40% { transform: translateX(3px) rotate(1deg); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } } @keyframes hohl-tap2 { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } } /* the tap on "Set done" */ .watch-tapdot { position: absolute; left: 50%; bottom: 9%; width: 18%; aspect-ratio: 1; margin-left: -9%; border-radius: 50%; background: rgba(255, 255, 255, .55); opacity: 0; pointer-events: none; } .watch-frame[data-screen="set"] .watch-tapdot, .watch-frame[data-screen="start"] .watch-tapdot { animation: hohl-press 3.6s ease-out 1.6s 1 both; } @keyframes hohl-press { 0% { opacity: 0; transform: scale(.4); } 10% { opacity: .8; transform: scale(1); } 30% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .watch-tapdot { display: none; } } /* Walkthrough */ .watch-flow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 80px); align-items: center; } .wf-watch { position: sticky; top: 110px; display: flex; flex-direction: column; align-items: center; gap: 22px; } .watch-frame.is-big { width: min(100%, 330px); } .wf-bar { width: min(100%, 260px); height: 4px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .wf-bar span { display: block; height: 100%; width: 0; background: var(--accent); } .wf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .wf-steps button { width: 100%; display: flex; gap: 16px; align-items: flex-start; text-align: left; font: inherit; color: var(--text-2); background: transparent; border: 1px solid transparent; border-radius: 18px; padding: 14px 16px; cursor: pointer; transition: background-color .25s, border-color .25s; } .wf-steps button:hover { background: var(--surface); } .wf-steps button[aria-current="step"] { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); } .wf-no { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.1rem; background: var(--surface-2); color: var(--muted); transition: background-color .25s, color .25s; } .wf-steps button[aria-current="step"] .wf-no { background: var(--accent); color: var(--hohl-accent-ink); } .wf-text strong { display: block; color: var(--text); font-size: 1.15rem; margin-bottom: 2px; } .wf-text span { display: block; line-height: 1.5; font-size: .95rem; } .wf-steps button:not([aria-current="step"]) .wf-text span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 781px) { .watch-flow { grid-template-columns: 1fr; } .wf-watch { position: static; } .watch-frame.is-big { width: min(70%, 280px); } } .watch-frame { box-sizing: border-box; } .watch-stage .watch-frame { width: 64%; } .watch-fig { width: 36%; bottom: -2%; } /* Exercise page, round 4: two calm columns, no lines in the steps, setup as tiles */ .ex-detail { gap: clamp(32px, 5vw, 72px) !important; align-items: flex-start !important; } .ex-detail > .ex-left { flex: 1 1 56% !important; } .ex-detail > .ex-right { flex: 1 1 44% !important; } .ex-detail h2, .ex-detail .wp-block-heading { margin: 0 0 22px !important; font-size: clamp(1.8rem, 3.2vw, 2.3rem); line-height: 1.1; } .ex-detail .cue-list { margin: 0 0 26px !important; display: grid; gap: 14px; } .ex-detail .cue-list li { border: 0 !important; padding: 4px 0 0 50px; min-height: 34px; color: var(--text); font-size: 1.05rem; line-height: 1.5; } .ex-detail .cue-list li::before { top: 0; } .ex-detail .tip-card { margin: 0 !important; } .ex-detail .note-card { margin: 14px 0 0 !important; max-width: none; padding: 16px 18px !important; font-size: .95rem; } .spec-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px !important; } .spec { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px !important; margin: 0 !important; } .spec.is-wide { grid-column: 1 / -1; } .spec p { margin: 0 !important; } .spec-k { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .spec-v { font-weight: 600; line-height: 1.4; margin-top: 3px !important; color: var(--text); } .spec-n { font-size: .85rem; line-height: 1.4; margin-top: 2px !important; color: var(--text-2); } .spec.is-wide.stab-1 .spec-v, .spec.is-wide.stab-2 .spec-v, .spec.is-wide.stab-3 .spec-v { font-weight: 500; color: var(--text-2); } .spec[class*="stab-"] .spec-k::after { content: ""; width: 54px; height: 8px; flex: none; border-radius: 4px; background: linear-gradient(90deg, var(--accent) 0 calc(var(--st) * 33.33% - 3px), transparent calc(var(--st) * 33.33% - 3px)), repeating-linear-gradient(90deg, var(--surface-2) 0 calc(33.33% - 3px), transparent calc(33.33% - 3px) 33.33%); } .spec.stab-1 { --st: 1; } .spec.stab-2 { --st: 2; } .spec.stab-3 { --st: 3; } .ex-detail .ex-map { margin: 0 !important; position: relative; padding: 14px 10px 8px; } .map-sides { position: absolute; left: 0; right: 0; top: 10px; display: flex; justify-content: space-around; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); pointer-events: none; } .ex-map figcaption { flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 10px 6px; font-size: .9rem; color: var(--text-2); } .ex-map figcaption b { color: var(--text); font-weight: 600; margin-right: 4px; } .ex-map .k-hot::before, .ex-map .k-warm::before { flex: none; } @media (max-width: 781px) { .ex-detail > .ex-left, .ex-detail > .ex-right { flex-basis: 100% !important; } .spec-grid { grid-template-columns: 1fr 1fr; } } .ex-detail .ex-map img { max-width: 330px; margin: 0 auto; } .ex-detail .ex-map { padding-top: 26px; } .ex-detail .map-sides { max-width: 330px; margin: 0 auto; } /* round 5 */ /* the header stays on top while scrolling (the template part wraps it, so the wrapper is sticky) */ .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; } .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; } @media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } } .admin-bar .site-header { top: 0; } .ex-tools { top: 66px; } .admin-bar .ex-tools { top: 98px; } @media (max-width: 560px) { .ex-tools { top: 65px; } } /* pages that end with a band go straight into the footer: no empty strip */ .site-main.is-wide { padding-bottom: 0; } .site-main.is-wide .wp-block-post-content > .section:last-child { border-bottom: 0; } /* watch: less rounding, the screen keeps its exact proportions (no cropping) */ .watch-frame { aspect-ratio: auto !important; height: auto; border-radius: 22%; padding: 5.5%; } .watch-screen { aspect-ratio: 422 / 514; height: auto !important; border-radius: 13%; } .watch-screen .ws { object-fit: contain; } .watch-fig { width: 34%; } .footer-more { font-size: .85rem; } .footer-more a { color: var(--text); } /* Contact form (hohl/contact-form) */ .ct-form { display: grid; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: clamp(18px, 3vw, 28px); margin: 1.2em 0 2em; scroll-margin-top: 90px; } .ct-form p { margin: 0; } .ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ct-field { display: grid; gap: 6px; align-content: start; } .ct-field label { font-size: .9rem; font-weight: 600; color: var(--text); } .ct-field label small { font-weight: 400; color: var(--muted); } .ct-field input, .ct-field select, .ct-field textarea { font: inherit; font-size: 1rem; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px; padding: 11px 12px; width: 100%; box-sizing: border-box; } .ct-field textarea { resize: vertical; min-height: 9em; line-height: 1.5; } .ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .ct-field [aria-invalid="true"] { border-color: #e5484d; } .ct-hint { color: var(--muted); font-size: .82rem; } .ct-err { color: #e5484d; font-size: .88rem; font-weight: 600; } :root[data-theme="light"] .ct-err { color: #c4292f; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .ct-err { color: #c4292f; } } .ct-alert { border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, #e5484d 14%, var(--surface)); border: 1px solid color-mix(in srgb, #e5484d 45%, var(--line)); color: var(--text) !important; font-weight: 600; } .ct-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .ct-foot .btn { border: 0; cursor: pointer; } .ct-note { flex: 1 1 260px; color: var(--muted) !important; font-size: .85rem; line-height: 1.5; } .ct-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .ct-done { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 22px; padding: clamp(18px, 3vw, 28px); margin: 1.2em 0 2em; scroll-margin-top: 90px; } .ct-done h2 { margin: 0 0 .3em; font-size: 1.4rem; } .ct-done p { margin: 0 0 .5em; } .ct-done-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--hohl-accent-ink); } @media (max-width: 640px) { .ct-row { grid-template-columns: 1fr; } } /* Watch gallery under the walkthrough */ .watch-gallery { list-style: none; margin: clamp(48px, 7vw, 80px) 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .wg-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; } .wg-item .watch-frame.is-small { width: min(100%, 190px); margin-bottom: 12px; } .wg-item strong { font-size: 1.05rem; } .wg-item > span { color: var(--muted); font-size: .9rem; line-height: 1.45; max-width: 220px; } @media (prefers-reduced-motion: no-preference) { .wg-item:nth-child(odd) .watch-frame { animation: hohl-float 7s ease-in-out infinite; } .wg-item:nth-child(even) .watch-frame { animation: hohl-float 8s ease-in-out -3s infinite; } } @media (max-width: 860px) { .watch-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Lock Screen Live Activity (hohl/lockscreen), colours from the app's widget */ .lock-phone { max-width: 290px; } .lock-screen { position: relative; display: block; aspect-ratio: 600 / 1304; border-radius: 42px; border: 9px solid #0b0a0a; box-sizing: border-box; overflow: hidden; container-type: inline-size; color: #f4f0e8; font-family: var(--wp--preset--font-family--body, system-ui, sans-serif); background: radial-gradient(120% 60% at 110% 20%, #5a5856 0%, transparent 55%), radial-gradient(90% 50% at -10% 75%, #4a4846 0%, transparent 60%), linear-gradient(160deg, #3a3937 0%, #1d1c1b 55%, #2c2b29 100%); box-shadow: 0 0 0 1.5px #3b3733, 0 40px 80px -20px rgba(0, 0, 0, .75), 0 0 120px -40px color-mix(in srgb, var(--accent) 45%, transparent); } .lock-screen::after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, 0); transition: background .6s ease; pointer-events: none; z-index: 1; } .lock-island { position: absolute; z-index: 5; top: 2.6cqw; left: 50%; transform: translateX(-50%); width: 34cqw; height: 10cqw; border-radius: 6cqw; background: #000; display: flex; align-items: center; justify-content: space-between; padding: 0 4cqw; box-sizing: border-box; font-family: var(--display); font-weight: 700; font-size: 4.6cqw; transition: width .5s cubic-bezier(.3, 1.4, .5, 1); } .lock-island span { opacity: 0; transition: opacity .3s; font-variant-numeric: tabular-nums; } .li-r { color: #ff5a1f; } .lock-head { position: absolute; top: 15cqw; left: 0; right: 0; text-align: center; transition: opacity .5s, transform .5s; } .lock-date { display: block; font-weight: 600; font-size: 5cqw; opacity: .9; } .lock-time { display: block; font-family: var(--display); font-weight: 600; font-size: 40cqw; line-height: .95; letter-spacing: -.01em; background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(205, 205, 205, .55)); -webkit-background-clip: text; background-clip: text; color: transparent; } .lock-la { position: absolute; left: 3.5cqw; right: 3.5cqw; top: 112cqw; z-index: 3; display: grid; transition: opacity .5s, transform .6s cubic-bezier(.3, 1.2, .5, 1); } .la-card { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 3cqw; padding: 4cqw 4.4cqw; border-radius: 6cqw; background: #161514; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); transition: opacity .45s, transform .45s; } .la-top { display: flex; align-items: flex-start; gap: 3cqw; } .la-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4cqw; } .la-cap { font-size: 3.6cqw; font-weight: 600; color: #aaa499; } .la-txt strong { font-family: var(--display); font-weight: 700; font-size: 7cqw; line-height: 1.05; } .la-sub { font-size: 4cqw; color: #aaa499; line-height: 1.3; font-variant-numeric: tabular-nums; } .la-big { font-family: var(--display); font-weight: 800; font-size: 13cqw; line-height: .9; font-variant-numeric: tabular-nums; } .la-big.is-clock { color: #ff5a1f; min-width: 22cqw; text-align: right; } .la-bot { display: flex; align-items: center; gap: 2.4cqw; font-size: 3.6cqw; font-weight: 600; color: #aaa499; } .la-plates i { display: block; width: 6cqw; height: 2cqw; border-radius: 1cqw; background: #ff5a1f; } .la-n { margin-right: auto; } .la-btn { flex: 0 0 31%; text-align: center; padding: 2.6cqw 0; border-radius: 3cqw; background: #302d2a; color: #f4f0e8; font-size: 4.2cqw; } .la-btn.is-main { background: #f4f0e8; color: #161514; font-family: var(--display); font-weight: 800; letter-spacing: .02em; } .lock-phone[data-phase="set"] .la-rest, .lock-phone:not([data-phase="set"]) .la-set { opacity: 0; transform: scale(.96); pointer-events: none; } .lock-home { position: absolute; z-index: 2; inset: 18cqw 7cqw auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7cqw 5.5cqw; opacity: 0; transform: scale(1.08); transition: opacity .5s, transform .6s; } .lock-home i { display: block; aspect-ratio: 1; border-radius: 22%; background: rgba(255, 255, 255, .13); } .lock-home i.is-app { background: none; overflow: hidden; } .lock-home img { width: 100%; height: 100%; display: block; } .lock-tools { position: absolute; z-index: 3; bottom: 9cqw; left: 10cqw; right: 10cqw; display: flex; justify-content: space-between; transition: opacity .4s; } .lock-tools i { width: 13cqw; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .16); } .lock-bar { position: absolute; z-index: 3; bottom: 2.4cqw; left: 50%; width: 36cqw; height: 1.2cqw; border-radius: 1cqw; background: #fff; transform: translateX(-50%); } .lock-phone[data-phase="island"] .lock-screen::after { background: rgba(10, 10, 10, .35); } .lock-phone[data-phase="island"] .lock-head, .lock-phone[data-phase="island"] .lock-tools { opacity: 0; transform: translateY(-4cqw); } .lock-phone[data-phase="island"] .lock-la { opacity: 0; transform: translateY(-80cqw) scale(.35); } .lock-phone[data-phase="island"] .lock-home { opacity: 1; transform: none; } .lock-phone[data-phase="island"] .lock-island { width: 52cqw; } .lock-phone[data-phase="island"] .lock-island span { opacity: 1; transition-delay: .3s; } @media (prefers-reduced-motion: no-preference) { .lock-phone .lock-screen { animation: hohl-float 8s ease-in-out infinite; } } .phone-fan .lock-phone { max-width: 270px; margin: 0 !important; flex: none; } .lock-phone .lock-home img { border: 0; border-radius: 0; box-shadow: none; background: none; } .la-card { align-self: start; } /* Sample plan picker: cards with plan icon, goal, level, week strip and equipment */ .pc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 36px; } .pc { position: relative; text-align: left; cursor: pointer; font: inherit; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; transition: border-color .2s, transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s, background-color .2s; } .pc::before { content: ""; position: absolute; inset: -40% -30% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); opacity: 0; transition: opacity .3s; pointer-events: none; } .pc:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .pc[aria-selected="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--accent) 70%, transparent); } .pc[aria-selected="true"]::before { opacity: 1; } .pc-top { display: flex; align-items: flex-start; justify-content: space-between; } .pc-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); flex: none; transition: background-color .25s, color .25s; } .pc-ic .pi { width: 32px; height: 32px; stroke-width: 1.8; } .pc[aria-selected="true"] .pc-ic, .pl-head .pc-ic { background: var(--accent); color: var(--hohl-accent-ink); } .pc[aria-selected="true"] .pc-ic .ac, .pl-head .pc-ic .ac { stroke: currentColor; } .pi { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; } .pi .ac { stroke: var(--accent); } .pc-lvl { display: flex; gap: 4px; padding-top: 4px; } .pc-lvl i { width: 7px; height: 16px; border-radius: 3px; background: color-mix(in srgb, var(--text) 16%, transparent); } .pc-lvl i:nth-child(1) { height: 8px; margin-top: 8px; } .pc-lvl i:nth-child(2) { height: 12px; margin-top: 4px; } .pc-lvl i.on { background: var(--accent); } .pc-goal { font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-top: 4px; } .pc-title { font-family: var(--display); font-size: 1.55rem; line-height: 1.05; color: var(--text); margin-top: -6px; } .pc-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .88rem; color: var(--text-2); } .pc-stats > span { display: inline-flex; align-items: center; gap: 6px; } .pc-stats .pi { width: 16px; height: 16px; color: var(--muted); } .pc-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 2px; } .pc-week > span { display: flex; flex-direction: column; align-items: center; gap: 3px; } .pc-week i { font-style: normal; font-size: .66rem; color: var(--muted); } .pc-week b { width: 100%; height: 22px; border-radius: 7px; display: grid; place-items: center; font-family: var(--display); font-size: .8rem; background: color-mix(in srgb, var(--text) 6%, transparent); color: transparent; } .pc-week .on b { background: color-mix(in srgb, var(--text) 16%, transparent); color: var(--text); } .pc[aria-selected="true"] .pc-week .on b { background: var(--accent); color: var(--hohl-accent-ink); } .pc-gear { display: flex; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); } .pc-gear { flex-wrap: wrap; } .pc-gear > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 6px; border-radius: 999px; font-size: .76rem; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text-2); } .pc-gear .pi { width: 17px; height: 17px; } .pl-head { display: flex; gap: 18px; align-items: flex-start; } .pl-head .pc-ic { width: 64px; height: 64px; border-radius: 20px; } .pl-head .pc-ic .pi { width: 36px; height: 36px; } .pl-title { margin: 0 0 4px; font-size: clamp(1.7rem, 3vw, 2.3rem); } .pl-head .pl-who { margin: 0; } .pl-time { display: flex; align-items: center; gap: 6px; } .pl-time .pi { width: 15px; height: 15px; } @media (prefers-reduced-motion: no-preference) { .pc-grid .pc { animation: pc-in .6s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i) * 70ms); } .pc[aria-selected="true"] .pc-ic .pi { animation: pc-pop .5s cubic-bezier(.3, 1.6, .5, 1); } .pc[aria-selected="true"] .pc-week .on b { animation: pc-day .4s ease both; } .pc[aria-selected="true"] .pc-week span:nth-child(2) b { animation-delay: .05s; } .pc[aria-selected="true"] .pc-week span:nth-child(3) b { animation-delay: .1s; } .pc[aria-selected="true"] .pc-week span:nth-child(4) b { animation-delay: .15s; } .pc[aria-selected="true"] .pc-week span:nth-child(5) b { animation-delay: .2s; } .pl-panel:not([hidden]) { animation: pc-in .45s cubic-bezier(.2, .8, .3, 1); } .pl-panel:not([hidden]) .pl-day li { animation: pc-in .4s ease both; } .pl-panel:not([hidden]) .pl-day li:nth-child(2) { animation-delay: .04s; } .pl-panel:not([hidden]) .pl-day li:nth-child(3) { animation-delay: .08s; } .pl-panel:not([hidden]) .pl-day li:nth-child(4) { animation-delay: .12s; } .pl-panel:not([hidden]) .pl-day li:nth-child(5) { animation-delay: .16s; } .pl-panel:not([hidden]) .pl-day li:nth-child(6) { animation-delay: .2s; } .pl-panel:not([hidden]) .pl-day li:nth-child(n+7) { animation-delay: .24s; } } @keyframes pc-in { from { opacity: 0; transform: translateY(12px); } } @keyframes pc-pop { 0% { transform: scale(.6) rotate(-8deg); } 100% { transform: none; } } @keyframes pc-day { from { transform: scaleY(.3); opacity: .3; } } @media (max-width: 900px) { .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .pc-grid { gap: 10px; } .pc { padding: 14px; gap: 8px; border-radius: 18px; } .pc-ic { width: 42px; height: 42px; border-radius: 13px; } .pc-ic .pi { width: 24px; height: 24px; } .pc-title { font-size: 1.22rem; } .pc-goal { font-size: .7rem; letter-spacing: .06em; } .pc-stats { font-size: .78rem; gap: 4px 10px; } .pc-week { gap: 2px; } .pc-week b { height: 18px; border-radius: 5px; font-size: .68rem; } .pc-gear { gap: 4px; } .pc-gear > span { font-size: .68rem; padding: 3px 7px 3px 5px; } .pc-gear .pi { width: 14px; height: 14px; } .pl-head .pc-ic { width: 48px; height: 48px; border-radius: 15px; } .pl-head .pc-ic .pi { width: 28px; height: 28px; } } .pl-panel { scroll-margin-top: 90px; } .pl-gear { margin: 12px 0 0; border-top: 0; padding-top: 0; } @media (min-width: 561px) { .pl-gear { display: none; } } @media (max-width: 560px) { .pc-grid .pc-gear { display: none; } .pc-stats { flex-direction: column; } .pc-lvl i { width: 5px; } } /* Library toolbar on phones: one swipeable chip row, compact checkboxes, so the sticky bar stays small */ @media (max-width: 700px) { .ex-tools { gap: 6px 12px; } .ex-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; } .ex-chips::-webkit-scrollbar { display: none; } .ex-chips .chip { flex: none; padding: 5px 11px; } .ex-basic { font-size: .8rem; gap: 6px; } .ex-count { font-size: .78rem; } } /* hub start page: short, centred hero without device pictures */ .hero-simple { text-align: center; padding-block: clamp(64px, 11vw, 150px) clamp(40px, 6vw, 80px); } .hero-simple .lead { max-width: 620px; margin-inline: auto; } .hero-simple .eyebrow { justify-content: center; } .hero-simple h1 { max-width: 15ch; margin-inline: auto; } .hub-contact .wp-block-buttons { margin-top: 1.2rem; } .hero-simple::before { inset: -45% 10% auto 10%; height: 700px; } .hub-contact { margin-inline: auto; text-align: center; } /* contact form: consent checkbox */ .ct-check { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; margin: 4px 0 18px; font-size: .95rem; line-height: 1.5; color: var(--text-2); } .ct-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); } .ct-check .ct-err { grid-column: 2; } /* hub start page: what hohl.dev does (icon strip) */ .icon-phone { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%227%22%20y%3D%222.5%22%20width%3D%2210%22%20height%3D%2219%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M10.5%205.5h3M11%2018.5h2%22%2F%3E%3C%2Fsvg%3E"); } .icon-web { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203c2.5%202.6%203.8%205.6%203.8%209s-1.3%206.4-3.8%209c-2.5-2.6-3.8-5.6-3.8-9S9.5%205.6%2012%203z%22%2F%3E%3C%2Fsvg%3E"); } .icon-person { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M5%2020c.8-3.6%203.6-5.5%207-5.5s6.2%201.9%207%205.5%22%2F%3E%3C%2Fsvg%3E"); } .icon-pin { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-6.5-5.6-6.5-11a6.5%206.5%200%200%201%2013%200c0%205.4-6.5%2011-6.5%2011z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.3%22%2F%3E%3C%2Fsvg%3E"); } /* Apple's official App Store badge (unchanged artwork; clear space around it comes from the gaps of the layout) */ .store-badge { display: inline-block; line-height: 0; border-radius: 10px; transition: opacity .15s; } .store-badge img { display: block; height: 52px; width: auto; } .store-badge:hover { opacity: .85; } .store-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } @media (max-width: 420px) { .store-badge img { height: 46px; } }