The Complete Ritual
/* ========================================================= THIS IS IT. — COMPLETE RITUAL Scoped styling so it will not affect the rest of Shopify ================================ ========================= */ #tii-complete-ritual { --tii-ivory: #f7f4ef; --tii-soft: #eee9e2; --tii-stone: #ded7ce; --tii-sage: #dce5d7; --tii-blush: #efd4cf; --tii-ink: #171614; --tii-muted: #69645e; --tii-dark: #12110f; --tii-line: rgba(23,22,20,.14); --tii-white: #ffffff; background: var(--tii-ivory); color: var(--tii-ink); font-family: inherit; overflow: hidden; } #tii-complete-ritual *, #tii-complete-ritual *::before, #tii-complete-ritual *::after { box-sizing: border-box; } #tii-complete-ritual h2, #tii-complete-ritual h3, #tii-complete-ritual p { margin-top: 0; } #tii-complete-ritual img { display: block; width: 100%; height: auto; } .cr-wrap { width: min(1320px, calc(100% - 64px)); margin-inline: auto; } .cr-kicker { display: block; margin-bottom: 14px; font-size: 9px; line-height: 1.2; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; } .cr-title { margin: 0; font-size: clamp(34px, 3.5vw, 53px); line-height: 1.03; letter-spacing: -.035em; font-weight: 400; } .cr-copy { margin: 0; color: var(--tii-muted); font-size: 14px; line-height: 1.72; } /* ========================================================= 01 — HERO ========================================================= */ .cr-hero { padding: 86px 0 94px; } .cr-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(42px, 6vw, 88px); align-items: center; } .cr-hero-media { overflow: hidden; } .cr-hero-media img { aspect-ratio: 16 / 10; object-fit: cover; } .cr-hero-copy { max-width: 535px; } .cr-hero-copy .cr-copy { max-width: 475px; margin-top: 24px; } .cr-sequence { display: flex; flex-wrap: wrap; gap: 11px 18px; margin-top: 31px; padding-top: 19px; border-top: 1px solid var(--tii-line); font-size: 9px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; } /* ========================================================= 02 — THREE PRODUCTS / THREE ROLES ========================================================= */ .cr-steps { padding: 90px 0; background: var(--tii-soft); } .cr-section-head { max-width: 750px; margin-bottom: 43px; } .cr-section-head .cr-copy { max-width: 570px; margin-top: 20px; } .cr-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--tii-line); border-left: 1px solid var(--tii-line); } .cr-step { min-height: 330px; padding: 28px 27px; border-right: 1px solid var(--tii-line); border-bottom: 1px solid var(--tii-line); } .cr-step--reset { background: rgba(239,212,207,.26); } .cr-step--perfect { background: rgba(220,229,215,.42); } .cr-step--nourish { background: rgba(255,255,255,.36); } .cr-step-number { display: block; color: #817b74; font-size: 9px; letter-spacing: .17em; text-transform: uppercase; } .cr-step h3 { margin: 42px 0 8px; font-size: 22px; line-height: 1.15; font-weight: 500; } .cr-step-purpose { margin-bottom: 22px; font-size: 9px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; } .cr-step p { margin: 0; color: var(--tii-muted); font-size: 13px; line-height: 1.68; } .cr-step-result { margin-top: 24px; padding-top: 15px; border-top: 1px solid var(--tii-line); color: var(--tii-ink); font-size: 10px; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; } /* ========================================================= 03 — LIFESTYLE / SYSTEM ========================================================= */ .cr-system { background: #ebe7e1; } .cr-system-grid { display: grid; grid-template-columns: 1.08fr .92fr; } .cr-system-media img { width: 100%; height: 100%; min-height: 620px; object-fit: cover; } .cr-system-copy { display: flex; align-items: center; padding: clamp(48px, 6vw, 90px); } .cr-system-inner { max-width: 505px; } .cr-system-inner .cr-copy { margin-top: 22px; } .cr-system-list { margin-top: 32px; } .cr-system-row { display: grid; grid-template-columns: 34px 112px 1fr; gap: 12px; padding: 15px 0; border-top: 1px solid var(--tii-line); } .cr-system-row:last-child { border-bottom: 1px solid var(--tii-line); } .cr-system-row small { font-size: 9px; letter-spacing: .13em; } .cr-system-row strong { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .cr-system-row span { color: var(--tii-muted); font-size: 12.5px; line-height: 1.5; } /* ========================================================= 04 — BLACK BRAND STATEMENT ========================================================= */ .cr-dark { padding: 96px 0; background: var(--tii-dark); color: var(--tii-white); } .cr-dark-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; align-items: end; } .cr-dark .cr-kicker { color: #d9c8ae; } .cr-dark .cr-title { color: #ffffff; } .cr-dark-copy { max-width: 555px; } .cr-dark-copy p { margin: 0; color: rgba(255,255,255,.88); font-size: 14px; line-height: 1.75; } .cr-dark-line { margin-top: 28px; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.27); color: rgba(255,255,255,.67); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; } /* ========================================================= 05 — MORNING + EVENING ========================================================= */ .cr-routine { padding: 92px 0; background: var(--tii-ivory); } .cr-routine-top { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; margin-bottom: 44px; align-items: end; } .cr-routine-intro { max-width: 520px; } .cr-routine-intro .cr-copy { margin-top: 20px; } .cr-routine-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--tii-line); border-left: 1px solid var(--tii-line); } .cr-routine-card { padding: 32px 30px; border-right: 1px solid var(--tii-line); border-bottom: 1px solid var(--tii-line); } .cr-routine-card small { display: block; margin-bottom: 27px; color: #817b74; font-size: 9px; letter-spacing: .17em; text-transform: uppercase; } .cr-routine-card h3 { margin-bottom: 20px; font-size: 21px; font-weight: 500; } .cr-routine-step { display: grid; grid-template-columns: 24px 1fr; gap: 11px; padding: 11px 0; border-top: 1px solid var(--tii-line); } .cr-routine-step:last-child { border-bottom: 1px solid var(--tii-line); } .cr-routine-step b { font-size: 9px; font-weight: 500; } .cr-routine-step span { color: var(--tii-muted); font-size: 12.5px; line-height: 1.55; } /* ========================================================= 06 — WHY THE SET ========================================================= */ .cr-why { padding: 92px 0; background: #dfd8cf; } .cr-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--tii-line); border-left: 1px solid var(--tii-line); margin-top: 42px; } .cr-why-card { min-height: 195px; padding: 25px 23px; border-right: 1px solid var(--tii-line); border-bottom: 1px solid var(--tii-line); } .cr-why-card small { color: #817b74; font-size: 9px; letter-spacing: .15em; } .cr-why-card h3 { margin: 31px 0 10px; font-size: 15px; font-weight: 600; } .cr-why-card p { margin: 0; color: var(--tii-muted); font-size: 12.5px; line-height: 1.62; } /* ========================================================= 07 — FINAL STEP IMAGE ========================================================= */ .cr-finish { background: #090807; } .cr-finish-grid { display: grid; grid-template-columns: 1.1fr .9fr; } .cr-finish-media img { height: 100%; min-height: 590px; object-fit: cover; } .cr-finish-copy { display: flex; align-items: center; padding: clamp(48px, 6vw, 88px); color: #ffffff; } .cr-finish-inner { max-width: 470px; } .cr-finish-copy .cr-kicker { color: #d9c8ae; } .cr-finish-copy .cr-title { color: #ffffff; } .cr-finish-copy p { margin: 23px 0 0; color: rgba(255,255,255,.83); font-size: 14px; line-height: 1.72; } /* ========================================================= 08 — FINAL BRAND CLOSE ========================================================= */ .cr-final { padding: 102px 0; background: var(--tii-ivory); text-align: center; } .cr-final-inner { max-width: 780px; margin: 0 auto; } .cr-final .cr-title { font-size: clamp(40px, 4.2vw, 61px); } .cr-final .cr-copy { max-width: 600px; margin: 24px auto 0; } .cr-final-line { margin-top: 31px; padding-top: 20px; border-top: 1px solid var(--tii-line); font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; } /* ========================================================= RESPONSIVE ========================================================= */ @media screen and (min-width: 1200px) { .cr-hero .cr-title, .cr-dark .cr-title { font-size: 55px; } } @media screen and (max-width: 990px) { .cr-wrap { width: calc(100% - 40px); } .cr-hero-grid, .cr-system-grid, .cr-dark-grid, .cr-routine-top, .cr-finish-grid { grid-template-columns: 1fr; } .cr-step-grid { grid-template-columns: 1fr; } .cr-why-grid { grid-template-columns: repeat(2, 1fr); } .cr-system-media img, .cr-finish-media img { min-height: 0; aspect-ratio: 16 / 10; } } @media screen and (max-width: 640px) { .cr-wrap { width: calc(100% - 30px); } .cr-title { font-size: 35px; line-height: 1.04; } .cr-hero, .cr-steps, .cr-dark, .cr-routine, .cr-why, .cr-final { padding: 64px 0; } .cr-system-copy, .cr-finish-copy { padding: 52px 24px; } .cr-hero-media img, .cr-system-media img, .cr-finish-media img { aspect-ratio: 4 / 5; } .cr-system-row { grid-template-columns: 27px 90px 1fr; } .cr-routine-grid, .cr-why-grid { grid-template-columns: 1fr; } .cr-step { min-height: 260px; } } The Complete Ritual THREE FORMULAS. ONE PURPOSEFUL ROUTINE. A complete three-step ritual for hydration, visible refinement and rich nourishment—designed to work together without turning skincare into a complicated routine. 01 Reset → 02 Perfect → 03 Nourish Three Essentials. Three Purposes. GIVE EVERY STEP A REASON. Each formula does something different. Layered together, they create one streamlined ritual from first drop to final layer. 01 / Reset LiquidReset Serum Hydrate · Replenish · Revive Lightweight hydration helps replenish dry, depleted-looking skin and restore a fresh, luminous appearance. First layer · Lightweight serum 02 / Perfect NoTox Perfector Firm · Smooth · Refine A concentrated peptide, protein and botanical treatment created to help improve the appearance of firmness, fine lines and uneven texture. Second layer · Targeted treatment 03 / Nourish InstantNourish Cream Cushion · Comfort · Replenish Rich moisture and barrier-supporting nourishment complete the ritual, leaving skin feeling soft, supple and comfortably conditioned. Final layer · Rich moisturizer Skincare, Streamlined DESIGNED TO WORK TOGETHER. The ritual progresses naturally from lightweight hydration to concentrated treatment to rich moisture. No guesswork. No crowded shelf. 01 Reset Build the hydration foundation. 02 Perfect Target the look of firmness and texture. 03 Nourish Finish with comforting moisture. The Minimalist Difference NOT MORE. BETTER. We believe a complete skincare ritual should feel intentional—not excessive. The Complete Ritual combines three complementary formulas so every product has a distinct purpose and every layer earns its place. Reset · Perfect · Nourish Your Daily Ritual THREE STEPS. TWICE A DAY. Layer from lightest to richest. The same intuitive sequence works morning and evening, with SPF completing your daytime routine. AM / Morning Prepare + Protect 01 LiquidReset — apply to clean skin. 02 NoTox Perfector — layer over face, neck and décolletage. 03 InstantNourish — finish with comforting moisture. 04 Finish with your broad-spectrum SPF. PM / Evening Reset + Replenish 01 LiquidReset — replenish after cleansing. 02 NoTox Perfector — add your targeted perfecting layer. 03 InstantNourish — seal in the ritual with rich moisture. The Complete Approach LESS ROUTINE. MORE PURPOSE. 01 COMPLEMENTARY Three distinct textures and functions designed to layer naturally together. 02 MULTI-CORRECTION Hydration, visible refinement and nourishment addressed within one streamlined ritual. 03 BOTANICAL + MODERN Purposeful botanicals paired with contemporary cosmetic ingredients and skin-conditioning actives. 04 MINIMALIST Fewer steps. Clearer purpose. A routine designed to be easy to live with every day. 03 / The Final Layer SEAL IN THE GOOD. Every ritual needs a finish. InstantNourish completes the three-step system with rich, velvety moisture— surrounding skin in comfort after your serum and treatment layers. The Complete Ritual RESET. PERFECT. NOURISH. Three purposeful essentials. One uncomplicated ritual for skin that looks fresh, smooth, supple and beautifully cared for. Minimalist Skincare. Maximum Results.
More you might like
Related
The Corporate Ritual - Complete The Ritual, Unlock
Related
The Corporate Ritual - Complete The Ritual, Unlock
Related
The Corporate Ritual - Complete The Ritual, Unlock
Related