/* ============================================================================ MADIN BRAND GUIDELINES — presentation layer Builds on colors_and_type.css (design tokens). Editorial brand-book styling. ============================================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg1); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; } /* language visibility — JS sets data-lang on */ [data-x="en"], [data-x="vi"] { display: none; } html[data-lang="en"] [data-x="en"] { display: revert; } html[data-lang="vi"] [data-x="vi"] { display: revert; } /* ----------------------------------------------------------------- LAYOUT */ .app { display: grid; grid-template-columns: 300px 1fr; min-height: 100vh; } .sidebar { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; background: var(--madin-moss); color: var(--fg-on-dark); display: flex; flex-direction: column; padding: 30px 0 18px; z-index: 20; } .sidebar::-webkit-scrollbar { width: 7px; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; } .brandmark { display: flex; align-items: center; gap: 12px; padding: 0 26px 26px; } .brandmark img { width: 40px; height: 40px; } .brandmark .wm { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: .02em; color: #fff; line-height: 1; } .brandmark .sub { font-family: var(--font-heading); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--madin-green); margin-top: 3px; } .nav { list-style: none; margin: 0; padding: 8px 14px; flex: 1; } .nav li { margin: 1px 0; } .nav a { display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: rgba(234,251,230,.62); font-family: var(--font-heading); font-size: 14px; font-weight: 500; padding: 9px 12px; border-radius: var(--r-sm); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .nav a .n { font-size: 11px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.32); min-width: 18px; } .nav a:hover { background: rgba(255,255,255,.06); color: #fff; } .nav a.active { background: var(--madin-green); color: var(--madin-moss); font-weight: 600; } .nav a.active .n { color: rgba(9,58,45,.55); } .langswitch { display: flex; gap: 6px; padding: 14px 26px 4px; } .langswitch button { flex: 1; cursor: pointer; border: 1px solid rgba(255,255,255,.18); background: transparent; color: rgba(234,251,230,.7); font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: .08em; padding: 9px 0; border-radius: var(--r-sm); text-transform: uppercase; transition: all var(--dur) var(--ease); } .langswitch button.on { background: var(--madin-green); color: var(--madin-moss); border-color: var(--madin-green); } .sidebar-foot { padding: 14px 26px 0; font-family: var(--font-body); font-size: 11px; color: rgba(234,251,230,.42); line-height: 1.5; } /* ------------------------------------------------------------------ MAIN */ .main { min-width: 0; } /* ---------------------------------------------------------------- CHAPTER */ .chapter { max-width: 1080px; margin: 0 auto; padding: 96px 72px; border-bottom: 1px solid var(--line); scroll-margin-top: 0; } .chapter:last-child { border-bottom: none; } .chapter-head { margin-bottom: 56px; } .eyebrow { font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--madin-green-deep); display: flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--madin-green); display: inline-block; } .chapter-num { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--madin-green); letter-spacing: .1em; margin-bottom: 18px; } .chapter-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 6vw, 68px); line-height: 1.02; letter-spacing: -.02em; margin: 14px 0 0; color: var(--fg1); } .lead { font-family: var(--font-body); font-size: 19px; line-height: 1.65; color: var(--fg2); max-width: 60ch; margin: 22px 0 0; } .h-sec { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -.01em; margin: 72px 0 6px; color: var(--fg1); } .h-sec:first-of-type { margin-top: 0; } .h-sub { font-family: var(--font-heading); font-weight: 600; font-size: 20px; margin: 40px 0 14px; color: var(--fg1); } .p { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--fg2); max-width: 64ch; margin: 14px 0; } .p strong { color: var(--fg1); font-weight: 700; } .kicker { font-family: var(--font-heading); font-weight:600; font-size: 13px; letter-spacing: .04em; color: var(--fg3); margin: 4px 0 0; } ul.list { margin: 16px 0; padding: 0; list-style: none; max-width: 64ch; } ul.list li { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--fg2); padding: 8px 0 8px 26px; position: relative; border-bottom: 1px solid var(--line); } ul.list li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 9px; height: 9px; background: var(--madin-green); border-radius: 2px; transform: rotate(45deg); } ul.list li strong { color: var(--fg1); } /* grid helpers */ .grid { display: grid; gap: 22px; margin: 28px 0; } .g2 { grid-template-columns: repeat(2,1fr); } .g3 { grid-template-columns: repeat(3,1fr); } .g4 { grid-template-columns: repeat(4,1fr); } @media (max-width: 880px){ .g3,.g4{ grid-template-columns: repeat(2,1fr);} } /* card */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm); } .card h4 { font-family: var(--font-heading); font-weight: 700; font-size: 17px; margin: 0 0 8px; color: var(--fg1); } .card p { font-family: var(--font-body); font-size: 14.5px; line-height: 1.6; color: var(--fg2); margin: 0; } .card .ico { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--accent-tint); display: grid; place-items: center; margin-bottom: 16px; color: var(--madin-green-deep); } .card .ico svg { width: 22px; height: 22px; } /* big quote / statement */ .statement { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px,3.6vw,44px); line-height: 1.12; letter-spacing: -.015em; color: var(--fg1); max-width: 20ch; margin: 40px 0; } .statement .g { color: var(--madin-green); } /* callout / note */ .callout { background: var(--accent-tint); border-radius: var(--r-lg); padding: 26px 30px; margin: 28px 0; } .callout .lbl { font-family: var(--font-heading); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--madin-green-deep); } .callout p { margin: 8px 0 0; color: var(--fg1); font-size: 16px; line-height: 1.6; } .note { border: 1px dashed var(--line-green); border-radius: var(--r-md); padding: 16px 20px; margin: 22px 0; background: var(--bg-subtle); } .note .lbl { font-family: var(--font-utility); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--madin-green-deep); } .note p { margin: 6px 0 0; font-size: 14px; color: var(--fg2); line-height: 1.55; } /* placeholder image slot */ .ph { position: relative; border-radius: var(--r-lg); overflow: hidden; background: repeating-linear-gradient(45deg, #eef3ee, #eef3ee 12px, #e7eee8 12px, #e7eee8 24px); display: grid; place-items: center; min-height: 200px; border: 1px solid var(--line); } .ph span { font-family: var(--font-utility); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg3); background: rgba(255,255,255,.82); padding: 6px 12px; border-radius: var(--r-pill); } /* divider */ .rule { height: 1px; background: var(--line); margin: 64px 0; border: 0; } /* do / dont */ .dd { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); } .dd .top { min-height: 150px; display: grid; place-items: center; padding: 24px; } .dd .cap { display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-family: var(--font-heading); font-weight: 600; font-size: 14px; } .dd.ok .cap { color: var(--madin-green-deep); background: var(--accent-tint); } .dd.no .cap { color: var(--coolant-50); background: #fdeceb; } .dd .cap .mk { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; } .dd.ok .cap .mk { background: var(--madin-green); } .dd.no .cap .mk { background: var(--coolant-50); } /* tables */ table.spec { width: 100%; border-collapse: collapse; margin: 24px 0; font-family: var(--font-body); } table.spec th, table.spec td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; } table.spec th { font-family: var(--font-heading); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg3); } table.spec td { color: var(--fg2); } table.spec td.mono { font-family: var(--font-utility); font-variant-numeric: tabular-nums; color: var(--fg1); font-weight: 600; } table.spec tr:last-child td { border-bottom: none; } .tag { display: inline-flex; align-items:center; gap:6px; font-family: var(--font-utility); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--fg1); border:1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; background:#fff; } /* meta two-column for strategy */ .meta { display:grid; grid-template-columns: 200px 1fr; gap: 0; } .meta .row { display: contents; } .meta dt { font-family: var(--font-heading); font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color: var(--madin-green-deep); padding: 18px 0; border-top:1px solid var(--line); } .meta dd { margin:0; padding:18px 0; border-top:1px solid var(--line); font-family: var(--font-body); font-size:16px; line-height:1.6; color: var(--fg2); } @media (max-width:760px){ .meta{ grid-template-columns:1fr;} .meta dd{ border-top:0; padding-top:0;} } /* hero / cover */ .cover { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 0 72px; position: relative; overflow: hidden; background: var(--madin-moss); color: #fff; } .cover .cv-gem { position: absolute; right: -80px; bottom: -120px; width: 560px; opacity: .9; filter: drop-shadow(0 30px 60px rgba(0,0,0,.4)); } .cover .cv-mesh { position:absolute; inset:0; opacity:.07; background-size: 180px 180px; } .cover .cv-inner { position: relative; z-index: 2; max-width: 760px; } .cover .cv-eyebrow { font-family: var(--font-heading); font-weight:600; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color: var(--madin-green); } .cover h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(52px, 9vw, 120px); line-height: .94; letter-spacing: -.03em; margin: 22px 0 0; } .cover .cv-sub { font-family: var(--font-body); font-size: 20px; line-height:1.55; color: rgba(234,251,230,.8); max-width: 46ch; margin: 28px 0 0; } .cover .cv-line { font-family: var(--font-display); font-weight:800; font-size: 22px; color: var(--madin-green); margin-top: 40px; letter-spacing: .01em; } .cover .cv-foot { position:absolute; bottom: 40px; left: 72px; right:72px; z-index:2; display:flex; justify-content: space-between; font-family: var(--font-heading); font-size: 12px; letter-spacing:.08em; text-transform:uppercase; color: rgba(234,251,230,.5); } /* toc */ .toc { list-style:none; margin: 0; padding: 0; } .toc li { display:flex; align-items: baseline; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); } .toc li:last-child { border-bottom: 1px solid var(--line); } .toc .n { font-family: var(--font-display); font-weight:800; font-size: 18px; color: var(--madin-green); min-width: 36px; } .toc .ti { font-family: var(--font-heading); font-weight: 600; font-size: 20px; color: var(--fg1); } .toc .de { font-family: var(--font-body); font-size:14px; color: var(--fg3); margin-left:auto; max-width: 40ch; text-align:right; } @media (max-width:760px){ .toc .de{ display:none; } } /* small responsive */ @media (max-width: 980px){ .app { grid-template-columns: 1fr; } .sidebar { position: fixed; inset: 0 auto 0 0; width: 280px; transform: translateX(-100%); transition: transform var(--dur) var(--ease); } .sidebar.open { transform: none; } .chapter { padding: 64px 28px; } .cover { padding: 0 28px; } } /* mobile menu button */ .menu-btn { display:none; position: fixed; top: 16px; left: 16px; z-index: 30; background: var(--madin-moss); color:#fff; border:none; border-radius: var(--r-md); width: 46px; height: 46px; cursor:pointer; box-shadow: var(--shadow-md); } @media (max-width: 980px){ .menu-btn{ display:grid; place-items:center; } } /* ------------------------------------------------------------------ PRINT */ @media print { @page { size: A4 portrait; margin: 16mm 14mm; } html, body { background: #fff; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .sidebar, .menu-btn, .langswitch { display: none !important; } .app { display: block; } .main { margin: 0; } .chapter { max-width: none; margin: 0; padding: 0 0 8mm; border-bottom: none; page-break-before: always; break-before: page; } .chapter:first-of-type { page-break-before: avoid; } .cover { min-height: 247mm; page-break-after: always; padding: 30mm 16mm; } .cover .cv-gem { width: 360px; } .chapter-head { margin-bottom: 28px; } .rule { margin: 28px 0; } .h-sec { margin: 36px 0 6px; page-break-after: avoid; } .h-sub { page-break-after: avoid; } .card, .sw, .dd, .photo-card, .can, .quote-card, .pic, .motif, .mesh-panel, .sweep, .gel, .webframe, .el-ring, .gem-stage, .clearspace, .pack-row, .app-stage, table.spec, .heat, .statement, .callout { page-break-inside: avoid; break-inside: avoid; } .grid { gap: 14px; } /* interactive-only chrome */ .demo-wrap .kicker { color: var(--fg3); } }