/* Page-specific styles for nitrogen-cycle.html */
#cycle-page-root {
--deep: #0D1026; --deep-2: #171B3D; --deep-3: #06070F;
--leaf: #35AD51; --leaf-dark: #248238; --leaf-light: #8FD9A1;
--amber: #E0A62B; --amber-dark: #A9761A;
--red: #E3342F; --red-dark: #A81E1A;
--blue: #2F80D6; --blue-dark: #1D5CA0;
--sand: #F6F1E6; --sand-line: #E1D8C4; --ink: #12142A; --ink-soft: #565A72; --paper: #FFFFFF;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink); background: var(--paper);
}
#cycle-page-root *{ box-sizing: border-box; }
#cycle-page-root h1, #cycle-page-root h2, #cycle-page-root h3, #cycle-page-root h4 {
font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.01em; color: var(--deep); margin: 0;
}
#cycle-page-root a { text-decoration: none; }
#cycle-page-root section { padding: 60px 40px; }
#cycle-page-root .wrap { max-width: 1100px; margin: 0 auto; }
#cycle-page-root .wrap-narrow { max-width: 780px; margin: 0 auto; }
#cycle-page-root .kicker {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
color: var(--leaf-dark); margin: 0 0 16px; background: rgba(53,173,81,0.12); padding: 7px 14px 7px 10px; border-radius: 20px;
}
#cycle-page-root .kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); }
#cycle-page-root .mono { font-family: 'JetBrains Mono', monospace; }
#cycle-page-root .btn {
display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 12px;
font-weight: 700; font-size: 14px; cursor: pointer; border: none; transition: transform .15s ease, box-shadow .15s ease;
font-family: 'Inter', sans-serif;
}
#cycle-page-root .btn svg { width: 15px; height: 15px; flex: none; }
#cycle-page-root .btn-primary { background: linear-gradient(135deg, var(--leaf) 0%, var(--leaf-dark) 100%); color: #fff; box-shadow: 0 10px 22px -8px rgba(36,130,56,0.5); }
#cycle-page-root .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -8px rgba(36,130,56,0.55); }
#cycle-page-root .btn-outline { background: var(--paper); color: var(--deep); border: 1.5px solid var(--sand-line); }
#cycle-page-root .btn-outline:hover { border-color: var(--leaf); color: var(--leaf-dark); }
/* ============ PAGE HERO ============ */
#cycle-page-root .page-header {
position: relative; overflow: hidden;
background: radial-gradient(130% 150% at 20% 0%, #142542 0%, var(--deep) 45%, var(--deep-3) 100%);
padding: 80px 40px 40px; text-align: center;
}
#cycle-page-root .page-header .exhibit-tag {
display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase; color: var(--leaf-light); border: 1px solid rgba(143,217,161,0.4);
padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
}
#cycle-page-root .page-header h1 { font-size: clamp(28px, 4.2vw, 44px); color: #fff; line-height: 1.2; max-width: 720px; margin: 0 auto; }
#cycle-page-root .page-header p { max-width: 620px; margin: 16px auto 0; color: #B9C1D6; font-size: 14.5px; line-height: 1.75; }
#cycle-page-root .page-header .locator { margin-top: 26px; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#cycle-page-root .page-header .locator span {
font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: #fff;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
padding: 7px 13px; border-radius: 999px;
}
/* ============ SECTION LABEL ============ */
#cycle-page-root .sec-label { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; }
#cycle-page-root .sec-label .num {
font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--leaf-dark);
border: 1.5px solid var(--leaf-dark); border-radius: 50%; width: 34px; height: 34px; flex: none;
display: flex; align-items: center; justify-content: center;
}
#cycle-page-root .sec-label .txt h2 { font-size: clamp(22px, 3vw, 28px); }
#cycle-page-root .sec-label .txt .sub { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; margin-top: 3px; }
/* ============ INTRO ============ */
#cycle-page-root .intro { background: var(--paper); }
#cycle-page-root .intro p { font-size: 15.5px; line-height: 1.9; color: var(--ink-soft); margin: 0 0 16px; }
#cycle-page-root .intro p strong { color: var(--ink); }
#cycle-page-root .intro-callout {
margin-top: 8px; background: var(--sand); border: 1px solid var(--sand-line); border-radius: 16px; padding: 22px 26px;
font-size: 14px; color: var(--ink-soft); line-height: 1.8;
}
#cycle-page-root .intro-callout strong { color: var(--ink); }
/* ============ DIAGRAM SECTION ============ */
#cycle-page-root .diagram { background: var(--sand); }
#cycle-page-root .diagram-wrap {
max-width: 940px; margin: 0 auto; background: var(--paper); border: 1px solid var(--sand-line); border-radius: 24px;
padding: 40px 30px; box-shadow: 0 1px 2px rgba(11,10,4,0.03), 0 14px 30px -22px rgba(11,10,4,0.18);
}
#cycle-page-root .diagram-caption { text-align: center; font-size: 13px; color: var(--ink-soft); margin-top: 20px; max-width: 640px; margin-left: auto; margin-right: auto; line-height: 1.7; }
#cycle-page-root .legend { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 24px; }
#cycle-page-root .legend .item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
#cycle-page-root .legend .dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
/* ============ MOBILE-FRIENDLY DIAGRAM (CSS flow, replaces wide SVG under 720px) ============ */
#cycle-page-root .diagram-desktop { display: block; }
#cycle-page-root .diagram-mobile { display: none; }
#cycle-page-root .flow-track { display: flex; flex-direction: column; align-items: center; gap: 0; }
#cycle-page-root .flow-node {
width: 100%; max-width: 320px; border-radius: 18px; padding: 20px 22px; text-align: center; color: #fff;
box-shadow: 0 10px 22px -12px rgba(0,0,0,0.25);
}
#cycle-page-root .flow-node .fn-icon { font-size: 26px; line-height: 1; margin-bottom: 6px; }
#cycle-page-root .flow-node .fn-formula { font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 700; margin-bottom: 2px; }
#cycle-page-root .flow-node .fn-name { font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 700; }
#cycle-page-root .flow-node .fn-sub { font-family: 'Inter', sans-serif; font-size: 11px; margin-top: 3px; opacity: 0.85; }
#cycle-page-root .flow-arrow { display: flex; flex-direction: column; align-items: center; padding: 10px 0; gap: 2px; }
#cycle-page-root .flow-arrow svg { width: 20px; height: 26px; color: var(--leaf-dark); }
#cycle-page-root .flow-arrow .fa-label { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700; color: var(--leaf-dark); text-align: center; }
#cycle-page-root .flow-arrow .fa-sub { font-family: 'Inter', sans-serif; font-size: 9.5px; color: var(--ink-soft); text-align: center; }
#cycle-page-root .flow-note {
margin-top: 8px; width: 100%; max-width: 340px; background: var(--deep); border-radius: 16px; padding: 20px 22px; color: #fff;
}
#cycle-page-root .flow-note h4 { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--leaf-light); margin-bottom: 10px; }
#cycle-page-root .flow-note p { font-family: 'Inter', sans-serif; font-size: 11.5px; color: #D7DBEA; line-height: 1.6; margin: 0 0 6px; }
#cycle-page-root .flow-note ul { margin: 0; padding-left: 16px; }
#cycle-page-root .flow-note li { font-family: 'Inter', sans-serif; font-size: 11.5px; color: #B9C1D6; line-height: 1.7; }
@media (max-width: 720px) {
#cycle-page-root .diagram-desktop { display: none; }
#cycle-page-root .diagram-mobile { display: block; }
}
/* ============ TIMELINE ============ */
#cycle-page-root .timeline { background: var(--paper); }
#cycle-page-root .tl-track { position: relative; max-width: 980px; margin: 0 auto; }
#cycle-page-root .tl-line {
position: absolute; left: 31px; top: 6px; bottom: 6px; width: 2px; background: var(--sand-line);
}
#cycle-page-root .tl-row { display: flex; gap: 24px; padding-bottom: 34px; position: relative; }
#cycle-page-root .tl-row:last-child { padding-bottom: 0; }
#cycle-page-root .tl-dot {
width: 64px; height: 64px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
text-align: center; line-height: 1.2; padding: 4px;
font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; color: #fff; z-index: 1;
}
#cycle-page-root .tl-content { padding-top: 6px; min-width: 0; flex: 1 1 auto; }
#cycle-page-root .tl-content h3 { font-size: 17px; margin-bottom: 6px; overflow-wrap: break-word; }
#cycle-page-root .tl-content p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.75; margin: 0; max-width: 640px; overflow-wrap: break-word; }
#cycle-page-root .tl-content .pill {
display: inline-block; font-size: 11px; font-weight: 700; color: var(--ink); background: var(--sand);
border: 1px solid var(--sand-line); padding: 3px 10px; border-radius: 999px; margin-left: 8px; vertical-align: middle;
}
@media (max-width: 640px) {
#cycle-page-root .timeline { padding-left: 16px; padding-right: 16px; }
#cycle-page-root .tl-track { padding-left: 2px; }
#cycle-page-root .tl-line { left: 26px; width: 3px; }
#cycle-page-root .tl-row { gap: 14px; padding-bottom: 20px; align-items: flex-start; }
#cycle-page-root .tl-dot { width: 54px; height: 54px; font-size: 9.5px; border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--sand-line); }
#cycle-page-root .tl-content {
padding: 14px 16px; margin-top: -2px; background: var(--sand); border: 1px solid var(--sand-line);
border-radius: 14px;
}
#cycle-page-root .tl-content h3 { font-size: 16px; line-height: 1.3; }
#cycle-page-root .tl-content p { font-size: 14px; line-height: 1.7; }
#cycle-page-root .tl-content .pill {
display: inline-block; width: auto; margin: 8px 0 0; background: var(--paper);
}
}
/* ============ TESTING & SIGNS ============ */
#cycle-page-root .testing { background: var(--sand); }
#cycle-page-root .test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
#cycle-page-root .test-card { background: var(--paper); border: 1px solid var(--sand-line); border-radius: 18px; padding: 26px; }
#cycle-page-root .test-card .badge {
display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
#cycle-page-root .test-card h3 { font-size: 16.5px; margin-bottom: 8px; }
#cycle-page-root .test-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; margin: 0; }
/* ============ FISHLESS CYCLE STEPS ============ */
#cycle-page-root .howto { background: var(--paper); }
#cycle-page-root .step-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
#cycle-page-root .step-card {
background: var(--sand); border: 1px solid var(--sand-line); border-radius: 18px; padding: 24px;
display: flex; gap: 16px;
}
#cycle-page-root .step-num {
width: 36px; height: 36px; border-radius: 50%; background: var(--deep); color: #fff; flex: none;
display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700;
}
#cycle-page-root .step-card h3 { font-size: 15.5px; margin-bottom: 6px; }
#cycle-page-root .step-card p { font-size: 13px; color: var(--ink-soft); line-height: 1.7; margin: 0; }
/* ============ FACT CALLOUTS ============ */
#cycle-page-root .facts { background: var(--sand); }
#cycle-page-root .facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
#cycle-page-root .fact-card { border: 1px solid var(--sand-line); border-radius: 18px; padding: 26px; background: var(--paper); position: relative; }
#cycle-page-root .fact-card .icon {
width: 40px; height: 40px; border-radius: 10px; background: var(--deep); color: var(--leaf-light);
display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
#cycle-page-root .fact-card .icon svg { width: 20px; height: 20px; }
#cycle-page-root .fact-card h3 { font-size: 16px; margin-bottom: 8px; }
#cycle-page-root .fact-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; margin: 0; }
/* ============ MISTAKES ============ */
#cycle-page-root .mistakes { background: var(--paper); }
#cycle-page-root .mistake-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
#cycle-page-root .mistake-item {
display: flex; gap: 16px; align-items: flex-start; background: var(--sand); border: 1px solid var(--sand-line);
border-radius: 14px; padding: 18px 22px;
}
#cycle-page-root .mistake-item .x-icon {
width: 30px; height: 30px; border-radius: 50%; background: rgba(227,52,47,0.12); color: var(--red-dark);
display: flex; align-items: center; justify-content: center; flex: none;
}
#cycle-page-root .mistake-item .x-icon svg { width: 16px; height: 16px; }
#cycle-page-root .mistake-item h4 { font-size: 14.5px; margin-bottom: 4px; font-family: 'Inter', sans-serif; font-weight: 700; color: var(--ink); }
#cycle-page-root .mistake-item p { font-size: 13px; color: var(--ink-soft); line-height: 1.65; margin: 0; }
/* ============ CTA BAND ============ */
#cycle-page-root .cta-band {
background: radial-gradient(130% 200% at 50% 0%, #142542 0%, var(--deep) 55%, var(--deep-3) 100%);
padding: 70px 40px; text-align: center; color: #fff;
}
#cycle-page-root .cta-band h2 { color: #fff; font-size: clamp(24px, 3.4vw, 32px); }
#cycle-page-root .cta-band p { max-width: 560px; margin: 14px auto 26px; font-size: 14.5px; color: #B9C1D6; line-height: 1.75; }
#cycle-page-root .cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
#cycle-page-root .cta-band .btn-outline { color: #fff; border-color: rgba(255,255,255,0.28); background: transparent; }
#cycle-page-root .cta-band .btn-outline:hover { border-color: var(--leaf-light); color: var(--leaf-light); }
/* ============ REVEAL ============ */
#cycle-page-root .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
#cycle-page-root .reveal.in { opacity: 1; transform: none; }
@media (max-width: 900px) {
#cycle-page-root .test-grid { grid-template-columns: 1fr; }
#cycle-page-root .step-grid { grid-template-columns: 1fr; }
#cycle-page-root .facts-grid { grid-template-columns: 1fr; }
#cycle-page-root .diagram-wrap { padding: 28px 16px; }
}
@media (max-width: 640px) {
#cycle-page-root section { padding: 44px 20px; }
#cycle-page-root .page-header { padding: 56px 20px 32px; }
#cycle-page-root .page-header h1 { font-size: 26px; }
#cycle-page-root .page-header p { font-size: 14px; }
#cycle-page-root .sec-label { gap: 12px; margin-bottom: 24px; }
#cycle-page-root .sec-label .num { width: 30px; height: 30px; font-size: 11px; }
#cycle-page-root .sec-label .txt h2 { font-size: 20px; }
#cycle-page-root .intro p { font-size: 15px; line-height: 1.8; }
#cycle-page-root .intro-callout { padding: 18px 20px; font-size: 13.5px; }
#cycle-page-root .diagram-wrap { padding: 20px 14px; border-radius: 18px; }
#cycle-page-root .test-card, #cycle-page-root .fact-card { padding: 20px; }
#cycle-page-root .step-card { padding: 18px; gap: 12px; }
#cycle-page-root .mistake-item { padding: 15px 16px; gap: 12px; }
#cycle-page-root .cta-band { padding: 50px 20px; }
#cycle-page-root .cta-band h2 { font-size: 22px; }
}