/* ============================================
I AM DICTATOR โ EDITORIAL REGIME
Polish layer: refined typography, restrained
color, editorial spacing. Loads AFTER style.css
so it wins on cascade.
Keep the identity (๐ red & gold on black) but
treat red/gold as precious materials โ deployed
with restraint, not wallpaper.
============================================ */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,700;0,6..96,900;1,6..96,400&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* ========== REFINED DESIGN TOKENS ========== */
:root {
/* Typography */
--font-serif: 'Bodoni Moda', 'Times New Roman', serif;
--font-sans: 'Manrope', system-ui, sans-serif;
--font-display: 'Bebas Neue', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
/* Color โ bright ivory canvas with a whisper of rose warmth, crisp white
cards, deep ink text. Feels clean and modern instead of aged/sepia.
Semantic: --ink values = CANVAS colours, --paper values = TEXT colours. */
--ink: #faf4ec; /* main canvas โ bright warm ivory */
--ink-soft: #f3ebde; /* soft warm surface */
--ink-warm: #ebe1cf; /* panel */
--ink-card: #ffffff; /* pure white for cards โ modern + crisp */
--paper: #1a120a; /* primary text โ deep warm ink */
--paper-soft: #3e2d1c; /* secondary warm brown ink */
--paper-dim: #6a523a; /* muted brown for meta */
--paper-whisper: #9d866a; /* very dim ochre-brown */
--blood: #c51f3c; /* dictator red โ vivid on ivory */
--blood-deep: #8a1128; /* wine for borders + shadows */
--blood-bright: #dc143c; /* bright brand red */
--gilt: #a67820; /* ochre gold โ legible on ivory */
--gilt-deep: #7a5a18; /* aged brass for dividers/strokes */
--gilt-bright: #d4a94b; /* warm bright gold for highlights */
--gilt-ink: #3d2a10; /* very dark gold, for accent text */
--hairline: rgba(166, 120, 32, 0.22);
--hairline-strong: rgba(166, 120, 32, 0.45);
--hairline-paper: rgba(26, 18, 10, 0.07);
/* Warm sepia shadows โ unified across the page. Pure black shadows read
as cold against the ivory canvas; these stay in-family. */
--shadow-card:
0 2px 0 rgba(109, 74, 32, 0.06),
0 12px 26px -18px rgba(109, 74, 32, 0.28);
--shadow-card-hover:
0 2px 0 rgba(109, 74, 32, 0.10),
0 20px 36px -18px rgba(109, 74, 32, 0.38);
--shadow-elevated:
0 2px 0 rgba(109, 74, 32, 0.10),
0 40px 80px -36px rgba(109, 74, 32, 0.42);
--shadow-terminal:
0 14px 30px -18px rgba(109, 74, 32, 0.38),
0 2px 0 rgba(26, 18, 10, 0.08);
/* Terminal/code-inset family โ warm sepia, not cold black. Kept as
tokens so every dark surface stays in-family with the ivory canvas. */
--ink-terminal: #231a12;
--ink-terminal-head: #2d2318;
--ink-terminal-border: rgba(109, 74, 32, 0.35);
--paper-terminal: #e8ddc8;
--paper-terminal-dim: #8a7d65;
/* Rhythm โ compact magazine density */
--s-1: 0.5rem;
--s-2: 0.875rem;
--s-3: 1.25rem;
--s-4: 1.75rem;
--s-5: 2.25rem;
--s-6: 3rem;
--s-7: 4rem;
--s-8: 5.5rem;
/* Motion */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}
/* ========== GLOBAL BASE ========== */
html {
scroll-behavior: smooth;
/* Canvas tint lives on so the body can stay transparent โ that lets
the fixed #particles-js (z-index 0) render above the page background
instead of being hidden behind a solid body fill. */
background: var(--ink);
}
body {
font-family: var(--font-sans);
font-weight: 400;
font-size: 17px;
line-height: 1.6;
color: var(--paper);
background-color: transparent;
font-feature-settings: "kern", "liga", "ss01";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Particles container โ bright ivory canvas with soft rose + gold corner
washes. Feels like a clean modern poster with hand-tinted edges rather
than aged paper. */
#particles-js {
position: fixed !important;
inset: 0 !important;
z-index: 0 !important;
background:
radial-gradient(ellipse 90% 65% at 0% 0%, rgba(220, 92, 122, 0.11), transparent 55%),
radial-gradient(ellipse 80% 60% at 100% 5%, rgba(212, 169, 75, 0.08), transparent 55%),
radial-gradient(ellipse 70% 55% at 50% 100%, rgba(197, 31, 60, 0.05), transparent 55%),
linear-gradient(180deg, #faf4ec 0%, #fdf9f1 50%, #faf4ec 100%);
}
/* Vignette OFF โ kill the brown edge wash that was making the page feel
dingy. A clean bright canvas reads as modern, not aged. */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background: transparent;
}
/* Very subtle paper weave โ just enough texture to stop the canvas reading
as sterile flat color, but not enough to look "dirty". Overlay blend
brightens the mids rather than multiplying dirt over everything. */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2;
opacity: 0.035;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
}
/* ========== TYPOGRAPHY HIERARCHY ========== */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
font-weight: 700;
letter-spacing: normal;
line-height: 1.1;
color: var(--paper);
}
/* Section titles โ keep Bebas for impact, but refined */
.section-title {
font-family: var(--font-display);
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 400;
letter-spacing: 0.08em;
line-height: 0.95;
color: var(--paper);
text-transform: uppercase;
text-align: center;
text-shadow: none;
margin-bottom: var(--s-3);
position: relative;
}
.section-subtitle {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(1.08rem, 1.7vw, 1.35rem);
color: var(--paper-soft);
line-height: 1.55;
max-width: 660px;
margin: 0 auto var(--s-4);
text-transform: none;
letter-spacing: normal;
}
/* Editorial eyebrow โ put before section titles as tiny ornamental heading */
.eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s-3);
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--gilt);
margin: 0 auto var(--s-3);
text-align: center;
}
.eyebrow::before,
.eyebrow::after {
content: "";
flex: 0 0 48px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gilt-deep), transparent);
}
.eyebrow-roman {
display: inline-block;
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: 0.78rem;
letter-spacing: 0.15em;
color: var(--paper-dim);
}
/* ========== CONTAINER + LAYOUT ========== */
.container {
max-width: 1180px;
margin: 0 auto;
padding: 0 32px;
}
section {
position: relative;
z-index: 3;
}
/* Ornamental divider between every pair of adjacent sections.
A centered gold diamond flanked by fading hairlines โ the one unifying
rhythmic element that replaces the chaotic rgba section tints. */
section + section::before,
section + footer::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 180px;
height: 30px;
pointer-events: none;
background: url("data:image/svg+xml;utf8,") center / contain no-repeat;
z-index: 5;
}
/* Ensure nav stays above every fixed overlay */
.navbar {
z-index: 100;
}
/* Give sections generous breathing room */
.dream-section,
.peasant-section,
.features,
.screenshots,
.use-cases,
.how-it-works,
.pricing,
.download,
.cta {
padding: var(--s-7) 0 !important;
}
/* ========== NAV ========== */
.navbar {
background: rgba(250, 244, 236, 0.80) !important;
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom: 1px solid var(--hairline) !important;
padding: 0;
transition: box-shadow 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.navbar.nav-scrolled {
background: rgba(250, 244, 236, 0.92) !important;
box-shadow: 0 4px 24px rgba(109, 74, 32, 0.08);
}
.navbar .container {
padding: 1.1rem 32px;
}
.logo-text {
font-family: var(--font-serif);
font-weight: 700;
font-size: 1.15rem;
letter-spacing: 0.08em;
color: var(--paper);
text-transform: uppercase;
}
.nav-links {
gap: var(--s-3);
list-style: none;
display: flex;
align-items: center;
}
/* Mobile: style.css collapses the nav into a dropdown. Re-assert the
collapsed state (polish.css was unconditionally flexing it and the dark
mobile dropdown bg leaked on desktop-narrow viewports). */
@media (max-width: 968px) {
.nav-links {
display: none !important;
background: rgba(250, 244, 236, 0.96) !important;
border-bottom: 1px solid var(--hairline-strong);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
}
.nav-links.active {
display: flex !important;
}
}
.nav-links a {
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--paper-soft);
text-decoration: none;
padding: 8px 2px;
position: relative;
transition: color 0.3s var(--ease-out);
}
.nav-links a:not(.btn-download):not(.nav-donate)::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--gilt);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s var(--ease-out);
}
.nav-links a:not(.btn-download):not(.nav-donate):hover {
color: var(--paper);
}
.nav-links a:not(.btn-download):not(.nav-donate):hover::after {
transform: scaleX(1);
transform-origin: left;
}
.nav-donate {
color: var(--blood) !important;
text-shadow: none;
font-weight: 600;
}
.nav-donate:hover {
color: var(--blood-deep) !important;
}
.btn-download {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 22px !important;
background: var(--paper) !important;
color: var(--ink) !important;
border: 1px solid var(--paper) !important;
border-radius: 2px;
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 0.75rem;
transition: all 0.25s var(--ease-out);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
}
.btn-download:hover {
background: var(--blood) !important;
border-color: var(--blood) !important;
color: var(--ink) !important;
transform: translateY(-1px);
}
/* ========== HERO ========== */
.hero {
min-height: 92vh;
padding: var(--s-6) 0 var(--s-5);
display: flex;
align-items: center;
position: relative;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 50% 70% at 20% 30%, rgba(197, 31, 60, 0.12), transparent 60%);
pointer-events: none;
z-index: 0;
}
.hero .container {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: var(--s-5);
align-items: center;
position: relative;
z-index: 1;
}
.hero-content {
max-width: 620px;
}
/* Editorial pre-title label โ sits above the big title */
.hero-content::before {
content: "โ EST. 2025 ยท VOICE-POWERED DICTATORSHIP โ";
display: block;
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.32em;
color: var(--gilt);
margin-bottom: var(--s-3);
opacity: 0.9;
}
.hero h1.glitch {
font-family: var(--font-display);
font-size: clamp(4rem, 12vw, 9rem);
font-weight: 400;
letter-spacing: 0.02em;
line-height: 0.88;
color: var(--paper);
margin: 0 0 var(--s-3);
text-shadow: none;
}
.hero-subtitle {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(1.25rem, 2.1vw, 1.75rem);
color: var(--paper);
line-height: 1.4;
margin: 0 0 var(--s-2);
letter-spacing: normal;
text-transform: none;
}
/* Kill the old "For Mac and PC" inline-styled thing visually โ replace with a refined cross-platform label */
.hero-content > p[style*="color: var(--color-gold)"] {
all: unset;
display: inline-flex !important;
align-items: center;
gap: 10px;
font-family: var(--font-mono) !important;
font-size: 0.72rem !important;
font-weight: 500 !important;
letter-spacing: 0.28em !important;
color: var(--gilt) !important;
margin: 8px 0 var(--s-3) !important;
text-transform: uppercase;
}
.hero-content > p[style*="color: var(--color-gold)"]::before {
content: "";
width: 28px;
height: 1px;
background: var(--gilt-deep);
}
.hero-tagline {
display: none; /* fold into hero-description; less shouting */
}
.hero-description {
font-size: 1.2rem;
font-weight: 400;
line-height: 1.65;
color: var(--paper);
margin: 0 0 var(--s-3);
max-width: 540px;
text-transform: none;
letter-spacing: normal;
}
.hero-description strong {
color: var(--gilt);
font-weight: 600;
}
/* Hero buttons โ tighten spacing, drop emoji effect */
.hero-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
margin-bottom: var(--s-4);
}
.hero-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: var(--s-3);
}
.hero-badges .badge {
background: transparent;
border: 1px solid var(--hairline);
color: var(--paper-dim);
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 500;
padding: 6px 12px;
border-radius: 2px;
letter-spacing: 0.12em;
text-transform: uppercase;
transition: all 0.3s var(--ease-out);
}
.hero-badges .badge:hover {
border-color: var(--gilt-deep);
color: var(--paper);
}
.scroll-indicator {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.3em;
color: var(--paper-whisper);
text-transform: uppercase;
}
.scroll-indicator span {
color: var(--paper-whisper);
}
/* ========== BUTTONS โ Editorial & refined ========== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 32px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
border-radius: 2px;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.4s var(--ease-out);
position: relative;
overflow: hidden;
}
.btn > span:first-child {
font-size: 1rem;
line-height: 1;
}
/* Primary โ blood red solid, cream text */
.btn-primary {
background: var(--blood);
color: var(--ink);
border-color: var(--blood);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 18px 36px -18px rgba(197, 31, 60, 0.55),
0 2px 0 rgba(109, 20, 32, 0.25);
}
.btn-primary:hover {
background: var(--blood-bright);
border-color: var(--blood-bright);
color: var(--ink);
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.22) inset,
0 22px 44px -18px rgba(220, 20, 60, 0.7),
0 2px 0 rgba(109, 20, 32, 0.3);
}
/* Secondary โ hairline gold, ghost on cream */
.btn-secondary {
background: transparent;
color: var(--paper);
border: 1px solid var(--gilt-deep);
letter-spacing: 0.18em;
}
.btn-secondary:hover {
background: var(--gilt);
color: var(--paper);
border-color: var(--gilt);
}
/* Gold โ reserved for THE primary action (hero Download) */
.btn-gold {
background: var(--gilt);
color: var(--paper) !important;
border-color: var(--gilt);
font-weight: 700;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.35) inset,
0 18px 36px -18px rgba(166, 120, 32, 0.6),
0 2px 0 rgba(122, 90, 24, 0.25);
}
.btn-gold:hover {
background: var(--gilt-bright);
border-color: var(--gilt-bright);
color: var(--paper) !important;
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.4) inset,
0 22px 44px -18px rgba(212, 169, 75, 0.7),
0 2px 0 rgba(122, 90, 24, 0.3);
}
/* Donate accent โ outlined red on cream, solid red on hover */
.btn-donate {
background: transparent;
color: var(--blood-deep);
border: 1px solid var(--blood);
letter-spacing: 0.18em;
font-weight: 700;
}
.btn-donate:hover {
background: var(--blood);
border-color: var(--blood);
color: var(--ink);
transform: translateY(-1px);
}
.btn-large {
padding: 20px 44px;
font-size: 0.9rem;
letter-spacing: 0.22em;
}
/* Silence the pulse animation everywhere except the ONE hero primary */
.btn.pulse {
animation: none !important;
}
.hero .hero-buttons .btn-primary.pulse,
.free-hero .btn-gold.pulse {
animation: gentle-pulse 4s ease-in-out infinite;
}
@keyframes gentle-pulse {
0%, 100% {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 20px 40px -20px rgba(197, 31, 60, 0.55),
0 0 0 0 rgba(197, 31, 60, 0);
}
50% {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 20px 40px -20px rgba(197, 31, 60, 0.55),
0 0 0 8px rgba(197, 31, 60, 0.12);
}
}
/* ========== DREAM SECTION ========== */
/* Every major section is transparent so the ivory canvas + particles show
through. Rhythm is established by the ornament dividers between sections,
not by alternating rgba tints. */
.dream-section {
background: transparent;
}
.dream-title {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(2.2rem, 4.5vw, 3.6rem);
line-height: 1.15;
color: var(--paper);
text-align: center;
letter-spacing: -0.01em;
text-transform: none;
margin-bottom: var(--s-3);
max-width: 860px;
margin-left: auto;
margin-right: auto;
}
.dream-subtitle {
font-family: var(--font-sans);
font-size: 1.2rem;
line-height: 1.65;
color: var(--paper);
text-align: center;
max-width: 700px;
margin: 0 auto var(--s-5);
letter-spacing: normal;
text-transform: none;
}
.dream-subtitle strong {
color: var(--gilt);
font-weight: 600;
}
.dream-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-4);
margin-top: var(--s-5);
}
.dream-item {
background: transparent;
border: none;
border-top: 1px solid var(--hairline);
padding: var(--s-4) 0 0 !important;
text-align: left;
position: relative;
}
.dream-item::before {
counter-increment: dream-counter;
content: "0" counter(dream-counter);
position: absolute;
top: -0.6rem;
left: 0;
background: #f1e7d0;
padding: 0 14px 0 0;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.25em;
color: var(--blood);
}
.dream-grid {
counter-reset: dream-counter;
}
.dream-item .dream-icon {
font-size: 1.8rem !important;
margin-bottom: var(--s-2) !important;
opacity: 0.8;
}
.dream-item h3 {
font-family: var(--font-serif);
font-weight: 700;
font-size: 1.4rem;
letter-spacing: normal;
text-transform: none;
color: var(--paper);
margin-bottom: var(--s-2);
}
.dream-item p {
font-family: var(--font-sans);
font-size: 1.02rem;
line-height: 1.65;
color: var(--paper);
}
.dream-item p strong {
color: var(--gilt);
font-weight: 600;
}
.dream-footer {
font-family: var(--font-serif) !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: 1.35rem !important;
text-align: center;
color: var(--paper-soft) !important;
margin: var(--s-5) auto 0 !important;
padding: var(--s-4) 0 0 !important;
background: transparent !important;
border: none !important;
border-top: 1px solid var(--hairline) !important;
border-radius: 0 !important;
max-width: 720px;
line-height: 1.55;
}
.dream-footer strong {
font-family: var(--font-display) !important;
letter-spacing: 0.06em !important;
color: var(--gilt) !important;
font-weight: 400 !important;
text-transform: uppercase;
}
.dream-footer strong {
color: var(--paper);
font-style: normal;
font-weight: 700;
}
/* ========== PEASANT SECTION ========== */
.peasant-section {
background: transparent;
}
.peasant-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--s-4);
align-items: stretch;
max-width: 1000px;
margin: 0 auto;
}
.peasant-problem,
.peasant-solution {
background: var(--ink-card);
border: 1px solid var(--hairline);
border-radius: 4px;
padding: var(--s-4);
animation: none !important;
transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
box-shadow: var(--shadow-card);
position: relative;
}
/* No more coloured top stripes โ the peasant cards identify themselves via
corner chips (ร red for problem, โฆ gold for solution) added to the HTML. */
.peasant-problem,
.peasant-solution {
border-top: 1px solid var(--hairline);
}
.peasant-solution {
background: var(--ink-card);
}
.peasant-problem:hover,
.peasant-solution:hover {
transform: translateY(-3px);
border-color: var(--hairline-strong);
box-shadow: var(--shadow-card-hover);
}
.peasant-problem h3,
.peasant-solution h3 {
font-family: var(--font-serif);
font-weight: 700;
font-size: 1.5rem;
letter-spacing: normal;
text-transform: none;
color: var(--paper);
margin: var(--s-2) 0;
}
.peasant-problem p,
.peasant-solution p {
font-family: var(--font-sans);
font-size: 1.02rem;
line-height: 1.65;
color: var(--paper);
margin: var(--s-1) 0;
text-transform: none;
letter-spacing: normal;
}
.peasant-problem strong { color: var(--blood-deep); font-weight: 700; }
.peasant-solution strong { color: var(--gilt-deep); font-weight: 700; }
/* Corner chips โ replace the old free-standing emoji icons. A 28px circle
sits in the top-left of each peasant card; red ร marks the problem, gold โฆ
marks the solution. Same shape, different fill = unified card grammar. */
.problem-icon,
.solution-icon {
position: absolute !important;
top: -14px;
left: var(--s-3);
width: 36px;
height: 36px;
border-radius: 50%;
display: flex !important;
align-items: center;
justify-content: center;
font-family: var(--font-serif);
font-size: 1.4rem !important;
font-weight: 700;
line-height: 1;
opacity: 1;
box-shadow: 0 4px 10px -4px rgba(109, 74, 32, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
margin: 0 !important;
}
.problem-icon {
background: var(--blood);
color: var(--ink);
border: 1px solid var(--blood-deep);
}
.solution-icon {
background: var(--gilt);
color: var(--paper);
border: 1px solid var(--gilt-deep);
}
.arrow-right {
font-family: var(--font-serif);
font-size: 3rem;
color: var(--gilt-deep);
display: flex;
align-items: center;
justify-content: center;
animation: none !important;
}
/* ========== FEATURES ========== */
.features {
background: transparent;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-3);
background: transparent;
border: none;
counter-reset: feat-counter;
}
/* Level B card โ unified with peasant + use-case cards */
.feature-card {
background: var(--ink-card) !important;
border: 1px solid var(--hairline) !important;
border-radius: 4px !important;
padding: var(--s-4) !important;
box-shadow: var(--shadow-card) !important;
transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out) !important;
position: relative;
}
.feature-card::before {
counter-increment: feat-counter;
content: "0" counter(feat-counter);
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.28em;
color: var(--gilt);
display: block;
margin-bottom: var(--s-2);
}
.feature-card:hover {
transform: translateY(-3px) !important;
border-color: var(--hairline-strong) !important;
box-shadow: var(--shadow-card-hover) !important;
background: var(--ink-card) !important;
}
.feature-card .feature-icon {
font-size: 1.8rem !important;
margin-bottom: var(--s-2) !important;
opacity: 0.75;
filter: grayscale(0.1);
}
.feature-card h3 {
font-family: var(--font-serif) !important;
font-weight: 700 !important;
font-size: 1.25rem !important;
letter-spacing: normal !important;
text-transform: none !important;
color: var(--paper) !important;
margin-bottom: var(--s-2) !important;
}
.feature-card p {
font-family: var(--font-sans);
font-size: 1rem !important;
line-height: 1.6 !important;
color: var(--paper) !important;
text-transform: none;
letter-spacing: normal;
}
.feature-card p strong {
color: var(--gilt);
font-weight: 600;
}
/* .is-new flag โ adds a gold "NEW" pill above the title and a subtle gold
wash to the card. Used on feature#07 and use-case#07. Unified marker
vocabulary: all "new" items carry this pill instead of arbitrary borders. */
.feature-card.is-new,
.use-case-card.is-new {
background: linear-gradient(180deg, rgba(166, 120, 32, 0.08), var(--ink-card)) !important;
border: 1px solid var(--hairline-strong) !important;
}
.feature-card.is-new::after,
.use-case-card.is-new::after {
content: "โฆ NEW";
position: absolute;
top: -12px;
right: var(--s-3);
padding: 5px 12px;
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--paper);
background: linear-gradient(180deg, #c79b3a 0%, var(--gilt) 100%);
border: 1px solid var(--gilt-deep);
border-radius: 3px;
box-shadow:
0 2px 6px -2px rgba(109, 74, 32, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
z-index: 2;
}
/* ========== SCREENSHOTS ========== */
.screenshots {
background: transparent;
}
.screenshots-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--s-4);
}
.screenshot-item {
background: transparent;
border: none !important;
box-shadow: none !important;
transition: transform 0.4s var(--ease-out);
}
.screenshot-item:hover {
transform: translateY(-4px);
}
.screenshot-frame {
border: 1px solid var(--hairline-strong);
border-radius: 2px;
overflow: hidden;
background: #ffffff;
box-shadow: var(--shadow-card);
transition: all 0.4s var(--ease-out);
}
.screenshot-item:hover .screenshot-frame {
border-color: var(--gilt-deep);
}
.screenshot-img {
display: block;
width: 100%;
height: auto;
}
.screenshot-label {
background: transparent !important;
color: var(--gilt) !important;
font-family: var(--font-mono) !important;
font-size: 0.7rem !important;
letter-spacing: 0.28em !important;
text-transform: uppercase;
padding: var(--s-2) 0 6px !important;
display: flex !important;
align-items: center;
gap: 8px !important;
border-top: none !important;
}
.screenshot-label .label-icon {
opacity: 0.7;
}
.screenshot-desc {
font-family: var(--font-sans) !important;
font-size: 0.85rem !important;
color: var(--paper-dim) !important;
line-height: 1.55 !important;
margin: 0 !important;
padding: 0 !important;
}
/* (Old inline-style selector overrides for screenshot-item removed โ
the HTML no longer uses inline var(--color-gold) styles. The NEW pill
and .is-new flag replace that vocabulary.) */
.screenshots-note {
text-align: center;
margin-top: var(--s-5);
padding-top: var(--s-4);
border-top: 1px solid var(--hairline);
}
.screenshots-note p {
font-family: var(--font-serif);
font-style: italic;
color: var(--paper-dim);
font-size: 1rem;
}
.screenshots-note p strong {
color: var(--paper);
font-style: normal;
font-weight: 700;
}
/* ========== USE CASES ========== */
.use-cases {
background: transparent;
}
.use-cases-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: var(--s-4);
}
.use-case-card {
background: var(--ink-card) !important;
border: 1px solid var(--hairline) !important;
border-radius: 4px !important;
padding: var(--s-4) !important;
box-shadow: var(--shadow-card) !important;
transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out) !important;
position: relative;
}
.use-case-card:hover {
transform: translateY(-3px) !important;
border-color: var(--hairline-strong) !important;
box-shadow: var(--shadow-card-hover) !important;
}
.use-case-header {
display: flex;
align-items: center;
gap: var(--s-2);
margin-bottom: var(--s-3);
}
.use-case-icon {
width: 48px !important;
height: 48px !important;
border-radius: 2px !important;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.use-case-icon span {
font-size: 1.5rem !important;
}
.use-case-header h3 {
font-family: var(--font-serif) !important;
font-weight: 700 !important;
font-size: 1.2rem !important;
letter-spacing: normal !important;
text-transform: none !important;
color: var(--paper) !important;
margin: 0 !important;
}
.use-case-subtitle {
font-family: var(--font-sans) !important;
font-size: 0.82rem !important;
color: var(--paper-dim) !important;
margin: 4px 0 0 !important;
text-transform: none !important;
letter-spacing: normal !important;
font-weight: 400 !important;
}
.use-case-demo {
margin: var(--s-3) 0;
}
/* Demo/terminal windows stay DARK but warm โ sepia ink, not cold black. The
contrast is intentional (framed "screen" in the cream page) but the warm
palette keeps them in-family with the rest of the design. */
.demo-window {
background: var(--ink-terminal) !important;
border: 1px solid var(--ink-terminal-border) !important;
border-radius: 4px !important;
overflow: hidden;
box-shadow: var(--shadow-terminal) !important;
}
.window-header {
background: var(--ink-terminal-head) !important;
border-bottom: 1px solid var(--ink-terminal-border) !important;
padding: 10px 16px !important;
font-family: var(--font-mono) !important;
font-size: 0.72rem !important;
color: var(--paper-terminal-dim) !important;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.window-content {
padding: var(--s-3) !important;
font-family: var(--font-mono) !important;
font-size: 0.78rem !important;
line-height: 1.7 !important;
}
.code-line,
.terminal-line {
color: var(--paper-terminal) !important;
margin: 3px 0 !important;
}
.comment { color: var(--paper-terminal-dim) !important; }
.string { color: #d4a94b !important; }
.keyword { color: #e07b6e !important; font-weight: 600 !important; }
.success { color: #9bc785 !important; }
.prompt { color: #d4a94b !important; }
.use-case-benefit {
font-family: var(--font-sans) !important;
font-size: 0.98rem !important;
color: var(--paper) !important;
line-height: 1.6 !important;
background: transparent !important;
border: none !important;
border-top: 1px solid var(--hairline) !important;
border-radius: 0 !important;
padding: var(--s-2) 0 0 !important;
margin-top: var(--s-3) !important;
text-align: left !important;
font-weight: 400 !important;
}
.use-case-benefit strong {
font-family: var(--font-mono) !important;
font-size: 0.8rem !important;
letter-spacing: 0.2em !important;
color: var(--gilt) !important;
text-transform: uppercase !important;
font-weight: 600 !important;
}
.use-case-benefit strong {
color: var(--gilt);
font-weight: 600;
}
/* (Old use-case NEW card override removed โ replaced by .is-new class.) */
.use-cases-cta {
text-align: center;
margin-top: var(--s-6) !important;
padding-top: var(--s-5) !important;
border-top: 1px solid var(--hairline) !important;
}
.use-cases-cta h3 {
font-family: var(--font-serif) !important;
font-style: italic;
font-weight: 400 !important;
font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
color: var(--paper) !important;
max-width: 640px;
margin: 0 auto var(--s-2) !important;
line-height: 1.2 !important;
}
.use-cases-cta p {
font-family: var(--font-sans);
color: var(--paper-soft);
font-size: 1.08rem;
max-width: 640px;
margin: 0 auto var(--s-3);
line-height: 1.65;
}
.use-cases-cta .btn {
margin-top: var(--s-2);
}
/* ========== HOW IT WORKS ========== */
.how-it-works {
background: transparent;
}
.steps {
max-width: 860px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0;
}
.step {
display: grid !important;
grid-template-columns: 96px 1fr !important;
gap: var(--s-3) !important;
padding: var(--s-3) 0 !important;
border-bottom: 1px solid var(--hairline);
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
align-items: baseline !important;
}
.step:last-child {
border-bottom: none;
}
.step-number {
font-family: var(--font-display) !important;
font-size: 4.5rem !important;
line-height: 0.9 !important;
font-weight: 400 !important;
color: var(--gilt) !important;
letter-spacing: 0 !important;
background: none !important;
-webkit-text-stroke: 0 !important;
width: auto !important;
height: auto !important;
border-radius: 0 !important;
display: flex;
align-items: flex-start;
}
.step-content h3 {
font-family: var(--font-serif) !important;
font-weight: 700 !important;
font-size: 1.6rem !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
color: var(--paper) !important;
margin-bottom: var(--s-2) !important;
}
.step-content p {
font-family: var(--font-sans) !important;
font-size: 1.08rem !important;
line-height: 1.65 !important;
color: var(--paper) !important;
text-transform: none;
letter-spacing: normal;
}
/* kbd pills โ gold-stamp family, coherent with eyebrows, counters, and the
gold editorial infrastructure. Was previously maxi-dark ink which read
louder than intended; gold reads as "key" without screaming. */
kbd,
.step-content p kbd {
display: inline-block !important;
font-family: var(--font-mono) !important;
font-size: 0.78rem !important;
font-weight: 700 !important;
background: linear-gradient(180deg, #c79b3a 0%, var(--gilt) 100%) !important;
color: var(--paper) !important;
border: 1px solid var(--gilt-deep) !important;
padding: 2px 8px !important;
border-radius: 3px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
box-shadow:
inset 0 -2px 0 rgba(26, 18, 10, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.35),
0 1px 0 rgba(109, 74, 32, 0.18) !important;
text-shadow: none !important;
line-height: 1.4 !important;
vertical-align: baseline;
}
.step-content p code,
.dream-item p code,
.feature-card p code {
font-family: var(--font-mono);
background: rgba(166, 120, 32, 0.18);
color: var(--gilt-ink);
padding: 2px 7px;
border-radius: 2px;
font-size: 0.85rem;
border: 1px solid var(--hairline-strong);
font-weight: 600;
}
.demo-box {
margin-top: var(--s-5);
max-width: 760px;
margin-left: auto;
margin-right: auto;
border: 1px solid var(--ink-terminal-border);
border-radius: 4px;
overflow: hidden;
background: var(--ink-terminal);
box-shadow: var(--shadow-terminal);
}
.demo-header {
background: var(--ink-terminal-head);
border-bottom: 1px solid var(--ink-terminal-border);
padding: 10px 16px;
}
.demo-title {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.22em;
color: var(--paper-terminal-dim);
text-transform: uppercase;
}
.demo-content {
padding: var(--s-3);
font-family: var(--font-mono);
font-size: 0.85rem;
line-height: 1.9;
color: var(--paper-terminal);
}
.typing-demo .highlight {
background: var(--gilt);
color: var(--ink);
padding: 2px 8px;
border-radius: 2px;
font-weight: 600;
}
.typing-demo .success {
color: #7cb97c;
}
/* ========== FREE FOREVER HERO (REFINED) ========== */
.free-forever-section {
background:
radial-gradient(ellipse 70% 50% at 50% 0%, rgba(197, 31, 60, 0.08), transparent 60%),
transparent !important;
padding: var(--s-6) 0 var(--s-5) !important;
}
.free-hero {
max-width: 860px !important;
margin: 0 auto !important;
padding: var(--s-5) var(--s-4) !important;
background: var(--ink-card) !important;
border: 1px solid var(--hairline-strong) !important;
border-radius: 4px !important;
box-shadow: var(--shadow-elevated) !important;
text-align: center;
position: relative;
overflow: hidden;
}
.free-hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 50% 30% at 50% 0%, rgba(166, 120, 32, 0.12), transparent 60%);
pointer-events: none;
}
.free-hero::after {
content: "CERTIFICATE ยท OF ยท LIBERATION";
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.4em;
color: var(--gilt-deep);
}
.free-badge {
display: inline-flex !important;
align-items: center;
gap: 10px !important;
padding: 8px 20px !important;
background: transparent !important;
border: 1px solid var(--hairline-strong) !important;
border-radius: 2px !important;
color: var(--gilt) !important;
font-family: var(--font-mono) !important;
font-size: 0.7rem !important;
font-weight: 500 !important;
letter-spacing: 0.3em !important;
margin: var(--s-4) 0 var(--s-3) !important;
animation: none !important;
text-transform: uppercase;
}
.free-badge span {
color: var(--gilt-bright);
opacity: 0.8;
}
.free-title {
font-family: var(--font-display) !important;
font-size: clamp(3.5rem, 8vw, 6rem) !important;
font-weight: 400 !important;
letter-spacing: 0.04em !important;
background: none !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
color: var(--paper) !important;
text-shadow: none !important;
line-height: 0.95 !important;
margin: 0 0 var(--s-3) !important;
}
.free-subtitle {
font-family: var(--font-serif) !important;
font-style: italic !important;
font-size: 1.25rem !important;
color: var(--paper-soft) !important;
margin: 0 0 var(--s-3) !important;
font-weight: 400 !important;
letter-spacing: normal !important;
text-transform: none !important;
line-height: 1.5;
}
.free-features {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px !important;
margin: 0 0 var(--s-5) !important;
}
.free-feature {
background: transparent !important;
border: 1px solid var(--hairline) !important;
color: var(--paper-dim) !important;
font-family: var(--font-mono) !important;
font-size: 0.72rem !important;
font-weight: 500 !important;
padding: 7px 14px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase;
border-radius: 2px !important;
}
.free-cta-row {
display: flex;
justify-content: center;
gap: var(--s-2) !important;
flex-wrap: wrap;
margin-bottom: var(--s-4) !important;
}
.free-note {
font-family: var(--font-serif) !important;
font-style: italic !important;
color: var(--paper-soft) !important;
font-size: 1rem !important;
max-width: 600px !important;
line-height: 1.65 !important;
margin: 0 auto !important;
}
.free-note a {
color: var(--gilt) !important;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: var(--gilt-deep);
text-decoration-thickness: 1px;
}
.free-note a:hover {
color: var(--paper) !important;
text-decoration-color: var(--paper);
}
/* ========== DOWNLOAD ========== */
.download {
background: transparent;
}
.download-box {
background: var(--ink-card) !important;
border: 1px solid var(--hairline-strong) !important;
border-radius: 4px !important;
padding: var(--s-5) !important;
box-shadow: var(--shadow-elevated) !important;
}
.download-box > div > div[style*="5rem"] {
font-size: 3rem !important;
opacity: 0.9;
margin-bottom: var(--s-2) !important;
}
.download-box h3 {
font-family: var(--font-display) !important;
font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
letter-spacing: 0.06em !important;
color: var(--paper) !important;
margin-bottom: var(--s-3) !important;
font-weight: 400 !important;
}
.platform-btn {
font-family: var(--font-mono) !important;
font-size: 0.78rem !important;
letter-spacing: 0.2em !important;
text-transform: uppercase;
border-radius: 2px !important;
border-width: 1px !important;
background: rgba(255, 255, 255, 0.5) !important;
color: var(--paper-soft) !important;
border-color: var(--hairline) !important;
transition: all 0.3s var(--ease-out);
}
.platform-btn:hover {
background: #ffffff !important;
color: var(--paper) !important;
border-color: var(--hairline-strong) !important;
}
.platform-btn.active {
background: var(--paper) !important;
border-color: var(--paper) !important;
color: var(--ink) !important;
box-shadow: 0 4px 12px -4px rgba(109, 74, 32, 0.35);
}
.platform-btn.active div {
color: var(--ink) !important;
}
.platform-btn div:first-child {
font-size: 1.8rem !important;
margin-bottom: 8px !important;
}
.platform-btn div:nth-child(2) {
font-family: var(--font-display) !important;
font-size: 1.1rem !important;
letter-spacing: 0.15em !important;
}
.platform-btn div:last-child {
font-family: var(--font-mono) !important;
font-size: 0.68rem !important;
color: var(--paper-whisper) !important;
letter-spacing: 0.15em !important;
margin-top: 6px !important;
}
.requirements {
margin-top: var(--s-5);
max-width: 620px;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: var(--s-3);
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
.requirements h4 {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.28em;
color: var(--gilt);
text-transform: uppercase;
margin-bottom: var(--s-3);
font-weight: 500;
}
.requirements ul {
list-style: none;
padding: 0;
}
.requirements li {
font-family: var(--font-sans);
font-size: 1rem;
color: var(--paper);
padding: 10px 0;
border-bottom: 1px solid var(--hairline-paper);
letter-spacing: normal;
text-transform: none;
}
.requirements li:last-child { border-bottom: none; }
/* ========== CTA SECTION ========== */
.cta {
background: transparent;
text-align: center;
padding: var(--s-5) 0 !important;
}
.cta h2 {
font-family: var(--font-serif) !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(2rem, 4.5vw, 3.4rem) !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
color: var(--paper) !important;
margin-bottom: var(--s-2) !important;
max-width: 720px;
margin-left: auto;
margin-right: auto;
line-height: 1.2 !important;
}
.cta p {
font-family: var(--font-sans);
font-size: 1.15rem;
color: var(--paper-soft);
max-width: 600px;
margin: 0 auto var(--s-4);
line-height: 1.65;
}
.cta-note {
font-family: var(--font-mono) !important;
font-size: 0.72rem !important;
color: var(--paper-whisper) !important;
letter-spacing: 0.25em !important;
text-transform: uppercase !important;
margin-top: var(--s-3) !important;
}
/* ========== FOOTER ========== */
.footer {
background: transparent;
border-top: 1px solid var(--hairline-strong);
padding: var(--s-5) 0 var(--s-3);
color: var(--paper-dim);
position: relative;
z-index: 3;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--s-4);
margin-bottom: var(--s-5);
}
.footer-section h4 {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.3em;
color: var(--gilt);
text-transform: uppercase;
margin-bottom: var(--s-2);
}
.footer-section p,
.footer-section li {
font-family: var(--font-sans);
font-size: 0.9rem;
line-height: 1.8;
color: var(--paper-dim);
}
.footer-section ul {
list-style: none;
padding: 0;
}
.footer-section a {
color: var(--paper-dim);
text-decoration: none;
transition: color 0.2s var(--ease-out);
border-bottom: 1px solid transparent;
padding-bottom: 1px;
}
.footer-section a:hover {
color: var(--paper);
border-bottom-color: var(--gilt-deep);
}
.footer-tagline {
font-family: var(--font-serif) !important;
font-style: italic !important;
color: var(--paper-whisper) !important;
font-size: 0.85rem !important;
margin-top: 8px !important;
}
.footer-bottom {
padding-top: var(--s-4);
border-top: 1px solid var(--hairline);
text-align: center;
}
.footer-bottom p {
font-family: var(--font-sans);
font-size: 0.82rem;
color: var(--paper-dim);
line-height: 1.7;
margin-bottom: 6px;
}
.footer-bottom p:nth-of-type(2) {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
color: var(--paper-whisper);
text-transform: uppercase;
}
.footer-credit-row {
display: flex;
justify-content: center;
gap: 8px;
margin-top: var(--s-3);
padding-top: var(--s-3);
border-top: 1px solid var(--hairline-paper);
}
.credit-link {
font-family: var(--font-mono) !important;
font-size: 0.68rem !important;
letter-spacing: 0.2em !important;
text-transform: uppercase;
padding: 8px 14px !important;
border-radius: 2px !important;
border-width: 1px !important;
background: transparent !important;
}
.credit-link strong {
font-family: var(--font-display);
letter-spacing: 0.12em;
font-weight: 400;
}
.credit-link-donate {
color: var(--blood-deep) !important;
border-color: rgba(197, 31, 60, 0.4) !important;
}
.credit-link-donate:hover {
color: var(--ink) !important;
background: var(--blood) !important;
border-color: var(--blood) !important;
}
.built-with-link {
color: var(--gilt) !important;
border-color: var(--hairline) !important;
}
.built-with-link:hover {
color: var(--paper) !important;
background: var(--ink-card) !important;
border-color: var(--hairline-strong) !important;
}
.patapim-logo-sm {
width: 18px !important;
height: 18px !important;
border-radius: 2px !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}
/* ========== FLOATING CREDITS (REFINED) ========== */
.floating-credits {
right: 24px !important;
bottom: 24px !important;
gap: 8px !important;
}
.floating-pill {
padding: 10px 14px !important;
border-radius: 2px !important;
border-width: 1px !important;
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
animation: none !important;
}
.floating-pill-icon {
animation: heart-beat 3s ease-in-out infinite !important;
}
.floating-pill-donate {
background: rgba(197, 31, 60, 0.94) !important;
border-color: rgba(255, 255, 255, 0.14) !important;
box-shadow:
0 12px 30px rgba(109, 74, 32, 0.35),
0 2px 0 rgba(109, 20, 32, 0.15),
0 1px 0 rgba(255, 255, 255, 0.10) inset !important;
}
.floating-pill-donate:hover {
background: var(--blood-bright) !important;
transform: translateY(-2px) !important;
box-shadow:
0 18px 40px rgba(197, 31, 60, 0.45),
0 2px 0 rgba(109, 20, 32, 0.18),
0 1px 0 rgba(255, 255, 255, 0.14) inset !important;
}
.patapim-badge {
background: rgba(26, 18, 10, 0.94) !important;
border-color: var(--hairline-strong) !important;
box-shadow:
0 12px 30px rgba(109, 74, 32, 0.35),
0 2px 0 rgba(109, 74, 32, 0.18),
0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
}
.patapim-badge:hover {
border-color: var(--gilt-deep) !important;
transform: translateY(-2px) !important;
box-shadow:
0 18px 40px rgba(109, 74, 32, 0.45),
0 0 20px rgba(196, 88, 255, 0.18),
0 2px 0 rgba(109, 74, 32, 0.22),
0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
}
.patapim-badge-logo {
width: 26px !important;
height: 26px !important;
border-radius: 2px !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.floating-pill-label {
font-family: var(--font-mono) !important;
font-size: 0.6rem !important;
letter-spacing: 0.22em !important;
color: rgba(255, 255, 255, 0.5) !important;
text-transform: uppercase;
font-weight: 500 !important;
}
.floating-pill-brand {
font-family: var(--font-display) !important;
font-size: 0.82rem !important;
letter-spacing: 0.16em !important;
font-weight: 400 !important;
}
.floating-pill-donate .floating-pill-brand {
color: var(--paper) !important;
}
/* ========== MOBILE REFINEMENTS ========== */
@media (max-width: 900px) {
.hero .container {
grid-template-columns: 1fr;
}
.hero-image {
display: none; /* focus on text on mobile */
}
.dream-grid,
.features-grid,
.use-cases-grid {
grid-template-columns: 1fr !important;
}
.peasant-grid {
grid-template-columns: 1fr !important;
}
.arrow-right {
transform: rotate(90deg);
justify-self: center;
margin: var(--s-2) 0;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.step {
grid-template-columns: 80px 1fr !important;
}
.step-number {
font-size: 3rem !important;
}
}
@media (max-width: 560px) {
.container { padding: 0 20px; }
.footer-grid {
grid-template-columns: 1fr;
}
.dream-section,
.peasant-section,
.features,
.screenshots,
.use-cases,
.how-it-works,
.pricing,
.download,
.cta {
padding: var(--s-5) 0 !important;
}
}
/* ========== PATCHES โ specific overrides that need higher specificity ========== */
/* Step numbers โ kill the remaining red glow box */
.how-it-works .step .step-number,
section#how-it-works .step-number {
font-family: var(--font-display) !important;
font-size: 4.5rem !important;
line-height: 0.9 !important;
font-weight: 400 !important;
color: var(--gilt) !important;
letter-spacing: 0 !important;
background: transparent !important;
-webkit-text-stroke: 0 !important;
width: auto !important;
height: auto !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
text-shadow: none !important;
padding: 0 !important;
display: block !important;
animation: none !important;
}
/* Screenshot labels โ ensure the pill/red-border style from base CSS is killed */
.screenshots-grid .screenshot-label,
.screenshot-item .screenshot-label {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 14px 0 6px !important;
color: var(--gilt) !important;
justify-content: flex-start !important;
}
.screenshot-label .label-text {
font-family: var(--font-mono) !important;
font-size: 0.7rem !important;
letter-spacing: 0.28em !important;
font-weight: 500 !important;
color: var(--gilt) !important;
text-transform: uppercase !important;
}
.screenshot-label .label-icon {
font-size: 0.9rem !important;
opacity: 0.65;
}
/* Screenshots note โ remove old red border box */
.screenshots-note {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: var(--s-3) 0 0 !important;
border-top: 1px solid var(--hairline) !important;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* Use-cases CTA box โ strip the red border */
.use-cases-cta {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: var(--s-6) 0 0 !important;
}
/* The NEW feature card spans full width in the grid โ icon + content laid
out side-by-side instead of stacked, so the full-width card doesn't feel
awkwardly tall. */
.features-grid .feature-card.is-new {
grid-column: 1 / -1;
display: grid;
grid-template-columns: auto 1fr;
gap: var(--s-3);
align-items: center;
}
.features-grid .feature-card.is-new::before {
grid-row: span 3;
align-self: start;
margin-right: var(--s-3);
}
.features-grid .feature-card.is-new .feature-icon {
grid-row: span 3;
align-self: center;
font-size: 2.2rem !important;
opacity: 0.9;
margin: 0 var(--s-3) 0 0 !important;
}
.features-grid .feature-card.is-new h3 {
margin: 0 !important;
}
.features-grid .feature-card.is-new p {
max-width: 720px;
}
/* Dream subtitle โ kill the broken dropcap */
.dream-subtitle::first-letter {
all: unset !important;
}
/* Dictator hero image โ framed portrait on parchment */
.hero-image {
position: relative;
}
.dictator-main {
max-width: 420px;
width: 100%;
height: auto;
border-radius: 4px;
filter: saturate(0.95) contrast(1.02);
border: 1px solid var(--hairline-strong);
box-shadow:
0 30px 60px -22px rgba(109, 74, 32, 0.42),
0 6px 0 rgba(166, 120, 32, 0.14);
}
.glow-effect {
position: absolute;
inset: -40px;
background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(197, 31, 60, 0.16), transparent 60%);
z-index: -1;
animation: none !important;
}
/* (Legacy inline-style overrides removed โ .is-new class handles the
translation cards now. Screenshot-item no longer uses inline gold styles.) */
/* Animated 'shake' / 'glow' classes from animations.css โ silence them for a calmer page */
.shake,
.glow {
animation: none !important;
}
/* Reveal transitions โ subtle fade-in only */
.reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Sweeping override: inline styles in the HTML still point at the old dark-theme
variables (--color-white, --color-light-gray). Remap those old variables to
the light-theme equivalents so any remaining inline style reads correctly. */
:root {
--color-white: #1a120a; /* was pure white for dark theme; now ink */
--color-light-gray: #3e2d1c; /* secondary warm ink */
--color-gray: #6a523a; /* muted brown */
--color-dark: #f6eedd; /* canvas cream */
--color-darker: #e9dcc0; /* deeper cream */
--color-black: #fbf5e6; /* elevated card cream */
}
/* Explicit cleanups for inline-styled paragraphs in the free/download sections */
.free-hero p[style*="color: var(--color-white)"],
.download-box p[style*="color: var(--color-white)"],
.download-box [style*="color: var(--color-white)"] {
color: var(--paper) !important;
}
/* ========== ORNAMENTAL ELEMENTS ==========
Decorative flourishes applied SYSTEMATICALLY at designated anchor points
(hero, free-hero, footer). Every ornament is a tiny graphic gesture in
gold or red on ivory โ vintage poster, not Etsy kitsch. Keep opacities
restrained (โค0.7) and avoid pure-saturated colour. */
/* FREE FOREVER stamp โ rotated red "approved" stamp with double border,
sits above the FREE FOREVER title like a certificate mark. Replaces the
previous "โจ IT'S FREE NOW โจ" pill. */
.free-stamp {
display: inline-block;
margin: var(--s-3) 0 var(--s-2);
padding: 10px 20px;
font-family: var(--font-mono);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--blood-deep);
border: 3px double var(--blood);
background: rgba(197, 31, 60, 0.04);
transform: rotate(-4deg);
box-shadow: 0 1px 0 rgba(109, 20, 32, 0.08), 0 4px 14px -8px rgba(197, 31, 60, 0.25);
position: relative;
z-index: 2;
}
/* Crown watermark โ faint gold crown path in the upper right of .free-hero,
like a royal approval stamp bleeding through the parchment. */
.free-hero::before {
background:
radial-gradient(ellipse 50% 30% at 50% 0%, rgba(166, 120, 32, 0.12), transparent 60%),
url("data:image/svg+xml;utf8,") no-repeat 92% 12% / 140px 140px !important;
}
/* Hero seal โ circular emblem with type path around a crown, overlaps the
bottom-right of the dictator portrait like a royal approval stamp. */
.hero-seal {
position: absolute;
right: -28px;
bottom: -28px;
width: 116px;
height: 116px;
background: url("data:image/svg+xml;utf8,") center / contain no-repeat;
z-index: 4;
filter: drop-shadow(0 4px 12px rgba(109, 74, 32, 0.25));
animation: seal-breathe 8s ease-in-out infinite;
}
@keyframes seal-breathe {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(2deg); }
}
/* Hero page-corner flourishes โ four subtle SVG corners framing the hero
viewport, like an illuminated manuscript border. */
.hero::after {
content: "";
position: absolute;
inset: 40px;
pointer-events: none;
background:
url("data:image/svg+xml;utf8,") no-repeat top left / 40px 40px,
url("data:image/svg+xml;utf8,") no-repeat top right / 40px 40px,
url("data:image/svg+xml;utf8,") no-repeat bottom left / 40px 40px,
url("data:image/svg+xml;utf8,") no-repeat bottom right / 40px 40px;
opacity: 0.5;
z-index: 0;
}
/* Footer seal โ small circular stamp with the brand + date, beside the
footer logo section. Closes the page with the same vocabulary as the hero seal. */
.footer-seal {
width: 72px;
height: 72px;
margin-top: var(--s-2);
background: url("data:image/svg+xml;utf8,") center / contain no-repeat;
opacity: 0.75;
}
/* ========== SELECTION ========== */
::selection {
background: var(--blood);
color: var(--ink);
}
::-moz-selection {
background: var(--blood);
color: var(--ink);
}
/* ========== MOTION PREFERENCES ========== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}