Piercing & Fit Guide
Source: https://varenel.com/pages/piercing-fit-guide
/* ========================================================= VARENEL — PIERCING & FIT GUIDE Editorial Sizing Studio Desktop / Laptop / Tablet / Mobile ========================================================= */ .varenel-fit-guide { --pf-bg: #F8F7F4; --pf-warm: #EEEAE4; --pf-soft: #E8E6E2; --pf-soft-2: #F2F0EB; --pf-dark: #24231F; --pf-night: #23221F; --pf-text: #4E4B45; --pf-muted: #77736C; --pf-line: #D8D4CD; --pf-light: #F5F3EE; --pf-light-muted: #BBB7AF; position: relative !important; width: 100vw !important; max-width: none !important; left: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; padding: 0 !important; overflow: visible !important; background: var(--pf-bg); color: var(--pf-dark); font-family: inherit; } .varenel-fit-guide *, .varenel-fit-guide *::before, .varenel-fit-guide *::after { box-sizing: border-box; } .varenel-fit-guide h1, .varenel-fit-guide h2, .varenel-fit-guide h3, .varenel-fit-guide p { margin-top: 0; } .varenel-fit-guide img { display: block; max-width: 100%; } .varenel-fit-guide a { color: inherit; } .varenel-fit-guide, .varenel-fit-guide *, .varenel-fit-guide h1, .varenel-fit-guide h2, .varenel-fit-guide h3, .varenel-fit-guide p, .varenel-fit-guide summary { word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } /* ========================================================= SHOPIFY FULL-WIDTH RESET ========================================================= */ #MainContent .page-width--narrow:has(.varenel-fit-guide), #MainContent .page-width:has(.varenel-fit-guide) { width: 100% !important; max-width: none !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; overflow: visible !important; } #MainContent .rte:has(.varenel-fit-guide) { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } #MainContent .shopify-section:has(.varenel-fit-guide) { width: 100% !important; max-width: none !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; overflow: visible !important; } /* Hide Shopify default page title */ body:has(.varenel-fit-guide) #MainContent .main-page-title, body:has(.varenel-fit-guide) #MainContent .page-title.main-page-title { display: none !important; } /* ========================================================= GLOBAL ========================================================= */ .pf-container { width: min(1320px, calc(100% - 120px)); margin-left: auto; margin-right: auto; } .pf-reading { max-width: 710px; } .pf-anchor { scroll-margin-top: 155px; } .pf-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #625E57; } .pf-eyebrow::before { content: ""; display: block; width: 32px; height: 1px; flex: 0 0 auto; background: #8A857C; } .pf-title { max-width: 800px; margin: 0; font-size: clamp(42px, 4vw, 60px); line-height: 1.03; letter-spacing: -.04em; font-weight: 500; } .pf-body { max-width: 710px; margin: 0; font-size: 16px; line-height: 1.78; color: var(--pf-text); } .pf-body + .pf-body { margin-top: 17px; } .pf-small { max-width: 700px; margin: 0; font-size: 13px; line-height: 1.72; color: var(--pf-muted); } .pf-link { display: inline-flex; margin-top: 24px; padding-bottom: 4px; border-bottom: 1px solid #918D85; font-size: 13px; line-height: 1.4; text-decoration: none !important; transition: opacity .2s ease; } .pf-link:hover { opacity: .6; } .pf-image-caption { position: absolute; left: 18px; bottom: 17px; margin: 0; padding: 8px 10px; background: rgba(248,247,244,.90); font-size: 9px; line-height: 1.4; letter-spacing: .13em; text-transform: uppercase; color: #625E57; } /* ========================================================= 01 / HERO ========================================================= */ .pf-hero { padding: 100px 0 104px; background: var(--pf-bg); } .pf-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 510px); gap: clamp(80px, 8vw, 135px); align-items: center; } .pf-hero-copy { max-width: 740px; } .pf-hero-label { display: flex; align-items: center; gap: 14px; margin: 0 0 27px; font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #5F5A52; } .pf-hero-label::before { content: ""; width: 34px; height: 1px; background: #8A857C; } .pf-hero h1 { max-width: 790px; margin: 0; font-size: clamp(56px, 5.3vw, 78px); line-height: .98; letter-spacing: -.055em; font-weight: 500; } .pf-hero-intro { max-width: 670px; margin: 31px 0 0; font-size: 17px; line-height: 1.74; color: var(--pf-text); } .pf-hero-meta { display: flex; flex-wrap: wrap; gap: 10px 27px; margin-top: 30px; padding-top: 21px; border-top: 1px solid var(--pf-line); } .pf-hero-meta span { font-size: 10px; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--pf-muted); } .pf-hero-image { position: relative; min-height: 640px; overflow: hidden; background: var(--pf-soft); } .pf-hero-image img { width: 100%; height: 100%; min-height: 640px; object-fit: cover; } .pf-measure-overlay { position: absolute; left: 22px; right: 22px; bottom: 20px; padding: 16px 17px 15px; background: rgba(248,247,244,.92); } .pf-overlay-line { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 9px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: #6E6A63; } .pf-overlay-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #A9A59E; z-index: 0; } .pf-overlay-line span { position: relative; z-index: 1; padding-right: 8px; background: #F8F7F4; } .pf-overlay-values { display: flex; justify-content: space-between; gap: 25px; } .pf-overlay-values strong { font-size: 20px; line-height: 1; font-weight: 500; } .pf-overlay-values span { font-size: 10px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-muted); text-align: right; } /* ========================================================= 02 / STICKY NAV ========================================================= */ .pf-nav { position: sticky; top: 78px; z-index: 20; width: 100%; background: rgba(248,247,244,.96); border-top: 1px solid var(--pf-line); border-bottom: 1px solid var(--pf-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .pf-nav-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .pf-nav-scroll::-webkit-scrollbar { display: none; } .pf-nav-list { display: flex; align-items: center; min-width: max-content; margin: 0; padding: 0; list-style: none; } .pf-nav-list li { flex: 0 0 auto; border-right: 1px solid var(--pf-line); } .pf-nav-list li:first-child { border-left: 1px solid var(--pf-line); } .pf-nav-list a { display: block; padding: 18px 23px; font-size: 10px; line-height: 1.4; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #625E57; text-decoration: none !important; transition: background .2s ease, color .2s ease; } .pf-nav-list a:hover { background: var(--pf-warm); color: var(--pf-dark); } /* ========================================================= 03 / TWO MEASUREMENTS ========================================================= */ .pf-two { padding: 135px 0; background: var(--pf-bg); } .pf-two-head { max-width: 760px; margin-bottom: 62px; } .pf-two-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--pf-line); border-bottom: 1px solid var(--pf-line); } .pf-two-item { min-width: 0; padding: 42px 65px 46px 0; } .pf-two-item + .pf-two-item { padding-left: 65px; border-left: 1px solid var(--pf-line); } .pf-two-kicker { display: block; margin-bottom: 25px; font-size: 10px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--pf-muted); } .pf-two-value { display: block; margin-bottom: 18px; font-size: clamp(67px, 6vw, 92px); line-height: .85; letter-spacing: -.06em; font-weight: 400; } .pf-two-unit { display: block; margin-bottom: 24px; font-size: 20px; line-height: 1.1; letter-spacing: -.02em; } .pf-two-item p { max-width: 470px; margin: 0; font-size: 14px; line-height: 1.75; color: var(--pf-text); } /* ========================================================= 04 / SIZE SYSTEM ========================================================= */ .pf-sizes { padding: 135px 0; background: var(--pf-warm); } .pf-sizes-head { display: grid; grid-template-columns: minmax(350px, .38fr) minmax(0, .62fr); gap: 105px; align-items: end; margin-bottom: 67px; } .pf-size-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #C8C4BD; border-bottom: 1px solid #C8C4BD; } .pf-size { min-width: 0; padding: 37px 31px 40px 0; } .pf-size + .pf-size { padding-left: 31px; border-left: 1px solid #C8C4BD; } .pf-size-number { display: block; margin-bottom: 23px; font-size: 10px; line-height: 1.4; letter-spacing: .14em; color: #827E76; } .pf-size h3 { margin: 0 0 23px; font-size: 42px; line-height: .95; letter-spacing: -.045em; font-weight: 400; } .pf-size-rail { position: relative; height: 24px; margin-bottom: 24px; } .pf-size-rail::before { content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 1px; background: #969188; } .pf-size-rail::after { content: ""; position: absolute; top: 5px; left: 0; width: 1px; height: 13px; background: #969188; box-shadow: calc(100% - 1px) 0 0 #969188; } .pf-size-spec { display: block; margin-bottom: 7px; font-size: 13px; line-height: 1.45; font-weight: 500; } .pf-size-gauge { display: block; margin-bottom: 17px; font-size: 11px; line-height: 1.45; letter-spacing: .08em; text-transform: uppercase; color: #68645D; } .pf-size p { margin: 0; font-size: 12px; line-height: 1.66; color: var(--pf-text); } .pf-size-note { max-width: 760px; margin: 30px 0 0; font-size: 13px; line-height: 1.72; color: var(--pf-muted); } /* ========================================================= 05 / POST LENGTH ========================================================= */ .pf-post { padding: 140px 0; background: var(--pf-bg); } .pf-post-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr); gap: 100px; align-items: center; } .pf-post-diagram { position: relative; min-height: 480px; padding: 60px 55px; background: var(--pf-soft); } .pf-post-object { position: absolute; top: 50%; left: 50%; width: 78%; height: 94px; transform: translate(-50%, -50%); } .pf-post-top { position: absolute; left: 0; top: 15px; width: 72px; height: 64px; border: 1px solid #77736C; border-radius: 50%; } .pf-post-shaft { position: absolute; left: 72px; right: 86px; top: 46px; height: 2px; background: #68645D; } .pf-post-back { position: absolute; right: 0; top: 20px; width: 86px; height: 54px; border: 1px solid #77736C; } .pf-post-measure { position: absolute; left: 72px; right: 86px; top: 4px; height: 20px; border-top: 1px solid #98938B; } .pf-post-measure::before, .pf-post-measure::after { content: ""; position: absolute; top: -6px; width: 1px; height: 12px; background: #98938B; } .pf-post-measure::before { left: 0; } .pf-post-measure::after { right: 0; } .pf-post-measure span { position: absolute; top: -31px; left: 50%; transform: translateX(-50%); padding: 0 8px; background: var(--pf-soft); font-size: 10px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: #68645D; white-space: nowrap; } .pf-post-label { position: absolute; font-size: 9px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: #6F6B63; } .pf-post-label--top { left: 6%; bottom: 20%; } .pf-post-label--post { left: 46%; bottom: 20%; } .pf-post-label--back { right: 2%; bottom: 20%; } .pf-post-content h2 { max-width: 620px; margin: 0 0 27px; font-size: clamp(42px, 4vw, 58px); line-height: 1.02; letter-spacing: -.04em; font-weight: 500; } .pf-post-points { margin-top: 33px; border-top: 1px solid var(--pf-line); } .pf-post-point { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 25px; padding: 15px 0; border-bottom: 1px solid var(--pf-line); } .pf-post-point strong { font-size: 11px; line-height: 1.5; font-weight: 600; color: #625E57; } .pf-post-point span { font-size: 13px; line-height: 1.65; color: var(--pf-text); } /* ========================================================= 06 / GAUGE ========================================================= */ .pf-gauge { padding: 130px 0; background: var(--pf-bg); border-top: 1px solid var(--pf-line); } .pf-gauge-grid { display: grid; grid-template-columns: minmax(350px, .38fr) minmax(0, .62fr); gap: 105px; align-items: center; } .pf-gauge-visual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding-top: 10px; } .pf-gauge-item { text-align: center; } .pf-gauge-circle { display: flex; align-items: center; justify-content: center; margin: 0 auto 23px; border: 1px solid #77736C; border-radius: 50%; } .pf-gauge-circle--18 { width: 76px; height: 76px; } .pf-gauge-circle--16 { width: 91px; height: 91px; } .pf-gauge-circle span { font-size: 12px; line-height: 1; color: #625E57; } .pf-gauge-item strong { display: block; margin-bottom: 7px; font-size: 24px; line-height: 1; font-weight: 500; } .pf-gauge-item small { display: block; font-size: 10px; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; color: var(--pf-muted); } .pf-gauge-rule { max-width: 570px; margin: 30px 0 0; padding-top: 23px; border-top: 1px solid var(--pf-line); font-size: 18px; line-height: 1.45; letter-spacing: -.02em; color: var(--pf-dark); } /* ========================================================= 07 / 16G VS 18G ========================================================= */ .pf-gauge-compare { padding: 110px 0 125px; background: var(--pf-bg); } .pf-gauge-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--pf-line); border-bottom: 1px solid var(--pf-line); } .pf-gauge-compare-item { padding: 37px 60px 41px 0; } .pf-gauge-compare-item + .pf-gauge-compare-item { padding-left: 60px; border-left: 1px solid var(--pf-line); } .pf-gauge-compare-item h3 { margin: 0 0 15px; font-size: 32px; line-height: 1.05; letter-spacing: -.035em; font-weight: 500; } .pf-gauge-compare-item p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--pf-text); } /* ========================================================= 08 / GOOD FIT ========================================================= */ .pf-good-fit { padding: 140px 0; background: var(--pf-soft); } .pf-good-fit-head { max-width: 780px; margin-bottom: 65px; } .pf-fit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #C4C0B9; border-bottom: 1px solid #C4C0B9; } .pf-fit-state { min-width: 0; padding: 37px 37px 41px 0; } .pf-fit-state + .pf-fit-state { padding-left: 37px; border-left: 1px solid #C4C0B9; } .pf-fit-state--ideal { background: rgba(248,247,244,.42); } .pf-fit-state-number { display: block; margin-bottom: 22px; font-size: 10px; line-height: 1.4; letter-spacing: .13em; color: #77736C; } .pf-fit-mini { position: relative; height: 122px; margin-bottom: 26px; } .pf-fit-ear { position: absolute; top: 50%; left: 50%; width: 44px; height: 94px; transform: translate(-50%, -50%); border-left: 1px solid #77736C; border-right: 1px solid #77736C; } .pf-fit-front, .pf-fit-rear { position: absolute; top: 50%; width: 25px; height: 25px; transform: translateY(-50%); border: 1px solid #77736C; border-radius: 50%; } .pf-fit-front { left: calc(50% - 50px); } .pf-fit-rear { right: calc(50% - 50px); border-radius: 2px; width: 29px; height: 20px; } .pf-fit-line { position: absolute; top: 50%; left: calc(50% - 28px); height: 1px; transform: translateY(-50%); background: #77736C; } .pf-fit-state--short .pf-fit-line { right: calc(50% - 28px); } .pf-fit-state--ideal .pf-fit-line { left: calc(50% - 36px); right: calc(50% - 36px); } .pf-fit-state--long .pf-fit-line { left: calc(50% - 49px); right: calc(50% - 49px); } .pf-fit-state h3 { margin: 0 0 16px; font-size: 25px; line-height: 1.1; letter-spacing: -.03em; font-weight: 500; } .pf-fit-list { margin-top: 20px; border-top: 1px solid #C4C0B9; } .pf-fit-list div { padding: 11px 0; border-bottom: 1px solid #C4C0B9; font-size: 12px; line-height: 1.55; color: #5F5B54; } /* ========================================================= 09 / MEASURE STATEMENT ========================================================= */ .pf-measure-statement { padding: 130px 0; background: var(--pf-warm); } .pf-measure-statement-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .38fr); gap: 115px; align-items: center; } .pf-measure-statement h2 { max-width: 800px; margin: 0; font-size: clamp(56px, 5.6vw, 82px); line-height: .94; letter-spacing: -.062em; font-weight: 400; } /* ========================================================= 10 / HOW TO MEASURE ========================================================= */ .pf-measure { padding: 140px 0; background: var(--pf-bg); } .pf-measure-grid { display: grid; grid-template-columns: minmax(380px, .44fr) minmax(0, .56fr); gap: 100px; align-items: center; } .pf-measure-image { position: relative; min-height: 590px; overflow: hidden; background: var(--pf-soft); } .pf-measure-image img { width: 100%; height: 100%; min-height: 590px; object-fit: cover; } .pf-measure-steps { margin-top: 39px; border-top: 1px solid var(--pf-line); } .pf-measure-step { display: grid; grid-template-columns: 52px 150px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--pf-line); } .pf-measure-step span { font-size: 10px; line-height: 1.5; color: var(--pf-muted); } .pf-measure-step strong { font-size: 12px; line-height: 1.5; font-weight: 500; } .pf-measure-step p { margin: 0; font-size: 12px; line-height: 1.66; color: var(--pf-text); } /* ========================================================= 11 / WHY NOT MEASURE EAR ========================================================= */ .pf-not-ear { padding: 98px 0; background: var(--pf-bg); } .pf-not-ear-grid { display: grid; grid-template-columns: minmax(300px, .31fr) minmax(0, .69fr); gap: 105px; padding-top: 35px; border-top: 1px solid var(--pf-line); } .pf-not-ear h2 { max-width: 420px; margin: 0; font-size: 34px; line-height: 1.07; letter-spacing: -.035em; font-weight: 500; } .pf-not-ear-tags { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px; padding-top: 17px; border-top: 1px solid var(--pf-line); } .pf-not-ear-tags span { font-size: 10px; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; color: var(--pf-muted); } /* ========================================================= 12 / ANATOMY ========================================================= */ .pf-anatomy { padding: 140px 0; background: var(--pf-bg); } .pf-anatomy-grid { display: grid; grid-template-columns: minmax(390px, .45fr) minmax(0, .55fr); gap: 100px; align-items: center; } .pf-ear-lineart { position: relative; min-height: 570px; background: var(--pf-soft); } .pf-ear-shape { position: absolute; top: 50%; left: 50%; width: 260px; height: 405px; transform: translate(-50%, -50%); border: 1px solid #8A857D; border-radius: 51% 46% 47% 52% / 42% 55% 45% 58%; } .pf-ear-shape::before { content: ""; position: absolute; top: 78px; left: 72px; width: 116px; height: 235px; border: 1px solid #AAA69E; border-radius: 54% 42% 57% 45%; } .pf-ear-shape::after { content: ""; position: absolute; top: 177px; left: 105px; width: 53px; height: 71px; border: 1px solid #AAA69E; border-radius: 50%; } .pf-anatomy-callout { position: absolute; display: flex; align-items: center; gap: 8px; font-size: 9px; line-height: 1.4; letter-spacing: .09em; text-transform: uppercase; color: #68645D; } .pf-anatomy-callout::before { content: ""; width: 34px; height: 1px; background: #A19D95; } .pf-anatomy-callout--1 { top: 15%; left: 7%; } .pf-anatomy-callout--2 { top: 35%; right: 6%; } .pf-anatomy-callout--3 { top: 60%; left: 6%; } .pf-anatomy-callout--4 { bottom: 15%; right: 8%; } .pf-anatomy-list { margin-top: 35px; border-top: 1px solid var(--pf-line); } .pf-anatomy-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 25px; padding: 15px 0; border-bottom: 1px solid var(--pf-line); } .pf-anatomy-row strong { font-size: 11px; line-height: 1.5; font-weight: 600; color: #625E57; } .pf-anatomy-row span { font-size: 13px; line-height: 1.66; color: var(--pf-text); } /* ========================================================= 13 / PLACEMENT ========================================================= */ .pf-placement { padding: 140px 0; background: var(--pf-warm); } .pf-placement-head { max-width: 790px; margin-bottom: 66px; } .pf-placement-layout { display: grid; grid-template-columns: minmax(420px, .48fr) minmax(0, .52fr); gap: 95px; align-items: center; } .pf-placement-ear { position: relative; min-height: 620px; background: rgba(248,247,244,.52); } .pf-placement-ear-shape { position: absolute; top: 50%; left: 50%; width: 285px; height: 445px; transform: translate(-50%, -50%); border: 1px solid #8A857D; border-radius: 51% 46% 47% 52% / 42% 55% 45% 58%; } .pf-placement-ear-shape::before { content: ""; position: absolute; top: 82px; left: 80px; width: 125px; height: 255px; border: 1px solid #AAA69E; border-radius: 54% 42% 57% 45%; } .pf-dot { position: absolute; width: 9px; height: 9px; border: 1px solid #625E57; border-radius: 50%; background: var(--pf-warm); } .pf-dot::after { position: absolute; top: -5px; left: 17px; min-width: 100px; font-size: 9px; line-height: 1.4; letter-spacing: .07em; text-transform: uppercase; color: #625E57; } .pf-dot--lobe { left: 51%; top: 72%; } .pf-dot--lobe::after { content: "Lobe"; } .pf-dot--upper { left: 47%; top: 62%; } .pf-dot--upper::after { content: "Upper Lobe"; } .pf-dot--helix { left: 61%; top: 26%; } .pf-dot--helix::after { content: "Helix"; } .pf-dot--forward { left: 39%; top: 28%; } .pf-dot--forward::after { content: "Forward Helix"; } .pf-dot--tragus { left: 38%; top: 52%; } .pf-dot--tragus::after { content: "Tragus"; } .pf-dot--conch { left: 53%; top: 50%; } .pf-dot--conch::after { content: "Conch"; } .pf-dot--flat { left: 52%; top: 34%; } .pf-dot--flat::after { content: "Flat"; } .pf-placement-list { border-top: 1px solid #C8C4BD; } .pf-placement-row { display: grid; grid-template-columns: 48px 155px minmax(0, 1fr); gap: 17px; padding: 17px 0; border-bottom: 1px solid #C8C4BD; } .pf-placement-row span:first-child { font-size: 10px; line-height: 1.5; color: #827E76; } .pf-placement-row strong { font-size: 12px; line-height: 1.5; font-weight: 500; } .pf-placement-row p { margin: 0; font-size: 12px; line-height: 1.65; color: var(--pf-text); } /* ========================================================= 14 / ONE EAR, MULTIPLE LENGTHS ========================================================= */ .pf-multi { padding: 140px 0; background: var(--pf-bg); } .pf-multi-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 490px); gap: 105px; align-items: center; } .pf-multi h2 { max-width: 730px; margin: 0 0 27px; font-size: clamp(48px, 4.8vw, 68px); line-height: .99; letter-spacing: -.05em; font-weight: 400; } .pf-multi-image { position: relative; min-height: 620px; overflow: hidden; background: var(--pf-soft); } .pf-multi-image img { width: 100%; height: 100%; min-height: 620px; object-fit: cover; } /* ========================================================= 15 / TILT / POST SHOWING ========================================================= */ .pf-common { padding: 110px 0 125px; background: var(--pf-bg); } .pf-common-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--pf-line); border-bottom: 1px solid var(--pf-line); } .pf-common-item { padding: 38px 60px 42px 0; } .pf-common-item + .pf-common-item { padding-left: 60px; border-left: 1px solid var(--pf-line); } .pf-common-item h3 { margin: 0 0 18px; font-size: 32px; line-height: 1.06; letter-spacing: -.035em; font-weight: 500; } .pf-common-item p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--pf-text); } .pf-common-tags { display: flex; flex-wrap: wrap; gap: 8px 17px; margin-top: 23px; padding-top: 17px; border-top: 1px solid var(--pf-line); } .pf-common-tags span { font-size: 10px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: var(--pf-muted); } /* ========================================================= 16 / SNUG VS RELAXED ========================================================= */ .pf-preference { padding: 120px 0; background: var(--pf-bg); } .pf-preference-head { max-width: 760px; margin-bottom: 58px; } .pf-preference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--pf-line); border-bottom: 1px solid var(--pf-line); } .pf-preference-item { padding: 37px 58px 41px 0; } .pf-preference-item + .pf-preference-item { padding-left: 58px; border-left: 1px solid var(--pf-line); } .pf-preference-item h3 { margin: 0 0 17px; font-size: 28px; line-height: 1.08; letter-spacing: -.03em; font-weight: 500; } .pf-preference-item p { margin: 0; font-size: 14px; line-height: 1.74; color: var(--pf-text); } /* ========================================================= 17 / DECORATIVE TOP + FIT VARIABLES ========================================================= */ .pf-more { padding: 120px 0 135px; background: var(--pf-bg); border-top: 1px solid var(--pf-line); } .pf-more-grid { display: grid; grid-template-columns: minmax(300px, .31fr) minmax(0, .69fr); gap: 105px; align-items: start; margin-bottom: 68px; } .pf-more-grid h2 { max-width: 430px; margin: 0; font-size: 35px; line-height: 1.06; letter-spacing: -.035em; font-weight: 500; } .pf-variable-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--pf-line); border-bottom: 1px solid var(--pf-line); } .pf-variable { padding: 25px 23px 27px 0; } .pf-variable + .pf-variable { padding-left: 23px; border-left: 1px solid var(--pf-line); } .pf-variable span { display: block; margin-bottom: 9px; font-size: 10px; line-height: 1.4; letter-spacing: .12em; color: var(--pf-muted); } .pf-variable strong { display: block; margin-bottom: 8px; font-size: 15px; line-height: 1.3; font-weight: 500; } .pf-variable p { margin: 0; font-size: 11px; line-height: 1.6; color: var(--pf-text); } /* ========================================================= 18 / NEW & HEALING ========================================================= */ .pf-healing { padding: 135px 0; background: var(--pf-warm); } .pf-healing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(370px, .43fr); gap: 110px; align-items: start; } .pf-healing h2 { max-width: 760px; margin: 0; font-size: clamp(50px, 5vw, 72px); line-height: .98; letter-spacing: -.055em; font-weight: 400; } .pf-healing-list { margin-top: 32px; border-top: 1px solid #C8C4BD; } .pf-healing-list div { padding: 13px 0; border-bottom: 1px solid #C8C4BD; font-size: 11px; line-height: 1.5; letter-spacing: .05em; text-transform: uppercase; color: #68645D; } /* ========================================================= 19 / DOWNSIZING ========================================================= */ .pf-downsize { padding: 130px 0; background: var(--pf-bg); } .pf-downsize-head { max-width: 780px; margin-bottom: 63px; } .pf-downsize-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--pf-line); border-bottom: 1px solid var(--pf-line); } .pf-downsize-step { position: relative; min-width: 0; padding: 34px 30px 38px 0; } .pf-downsize-step + .pf-downsize-step { padding-left: 30px; border-left: 1px solid var(--pf-line); } .pf-downsize-step span { display: block; margin-bottom: 17px; font-size: 10px; line-height: 1.4; letter-spacing: .13em; color: var(--pf-muted); } .pf-downsize-step h3 { margin: 0 0 12px; font-size: 20px; line-height: 1.2; font-weight: 500; } .pf-downsize-step p { margin: 0; font-size: 12px; line-height: 1.66; color: var(--pf-text); } /* ========================================================= 20 / DON'T DOWNSIZE FOR LOOK ========================================================= */ .pf-look { padding: 115px 0; background: var(--pf-bg); border-top: 1px solid var(--pf-line); } .pf-look-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(350px, .38fr); gap: 110px; align-items: center; } .pf-look h2 { max-width: 770px; margin: 0; font-size: clamp(48px, 4.7vw, 67px); line-height: .99; letter-spacing: -.05em; font-weight: 400; } /* ========================================================= 21 / CHANGE GAUGE + THREAD SYSTEM ========================================================= */ .pf-system { padding: 125px 0; background: var(--pf-bg); } .pf-system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--pf-line); border-bottom: 1px solid var(--pf-line); } .pf-system-column { padding: 39px 58px 43px 0; } .pf-system-column + .pf-system-column { padding-left: 58px; border-left: 1px solid var(--pf-line); } .pf-system-column h3 { margin: 0 0 20px; font-size: 31px; line-height: 1.07; letter-spacing: -.035em; font-weight: 500; } .pf-system-column p { margin: 0; font-size: 14px; line-height: 1.76; color: var(--pf-text); } .pf-system-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 27px; border-top: 1px solid var(--pf-line); } .pf-system-part { padding: 15px 14px 16px 0; } .pf-system-part + .pf-system-part { padding-left: 14px; border-left: 1px solid var(--pf-line); } .pf-system-part strong { display: block; margin-bottom: 5px; font-size: 11px; line-height: 1.4; font-weight: 500; } .pf-system-part span { display: block; font-size: 9px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: var(--pf-muted); } /* ========================================================= 22 / PIERCER VS VARENEL ========================================================= */ .pf-help-boundary { padding: 135px 0; background: var(--pf-bg); } .pf-help-head { max-width: 760px; margin-bottom: 60px; } .pf-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--pf-line); border-bottom: 1px solid var(--pf-line); } .pf-help-column { padding: 39px 58px 43px 0; } .pf-help-column + .pf-help-column { padding-left: 58px; border-left: 1px solid var(--pf-line); } .pf-help-column h3 { margin: 0 0 25px; font-size: 31px; line-height: 1.07; letter-spacing: -.035em; font-weight: 500; } .pf-help-list { border-top: 1px solid var(--pf-line); } .pf-help-list div { padding: 12px 0; border-bottom: 1px solid var(--pf-line); font-size: 12px; line-height: 1.55; color: #625E57; } .pf-help-tagline { max-width: 900px; margin: 42px 0 0; font-size: 18px; line-height: 1.55; letter-spacing: -.02em; } /* ========================================================= 23 / PHOTOS ========================================================= */ .pf-photos { padding: 100px 0; background: var(--pf-bg); } .pf-photos-grid { display: grid; grid-template-columns: minmax(300px, .31fr) minmax(0, .69fr); gap: 105px; padding-top: 35px; border-top: 1px solid var(--pf-line); } .pf-photos h2 { margin: 0; font-size: 34px; line-height: 1.07; letter-spacing: -.035em; font-weight: 500; } .pf-photo-factors { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; padding-top: 17px; border-top: 1px solid var(--pf-line); } .pf-photo-factors span { font-size: 10px; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; color: var(--pf-muted); } /* ========================================================= 24 / BEFORE INSERT ========================================================= */ .pf-before { padding: 130px 0; background: var(--pf-soft); } .pf-before-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .42fr); gap: 110px; align-items: start; } .pf-before h2 { max-width: 780px; margin: 0; font-size: clamp(58px, 5.7vw, 82px); line-height: .93; letter-spacing: -.063em; font-weight: 400; } .pf-before-list { border-top: 1px solid #C4C0B9; } .pf-before-list div { padding: 14px 0; border-bottom: 1px solid #C4C0B9; font-size: 12px; line-height: 1.5; letter-spacing: .05em; text-transform: uppercase; color: #625E57; } .pf-before-note { margin-top: 27px; font-size: 13px; line-height: 1.74; color: var(--pf-text); } /* ========================================================= 25 / BETWEEN LENGTHS ========================================================= */ .pf-between { padding: 125px 0; background: var(--pf-bg); } .pf-between-grid { display: grid; grid-template-columns: minmax(340px, .37fr) minmax(0, .63fr); gap: 105px; align-items: start; } .pf-between h2 { max-width: 500px; margin: 0; font-size: clamp(42px, 4vw, 58px); line-height: 1.02; letter-spacing: -.04em; font-weight: 500; } .pf-decision { border-top: 1px solid var(--pf-line); } .pf-decision-step { display: grid; grid-template-columns: 50px 220px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--pf-line); } .pf-decision-step span { font-size: 10px; line-height: 1.5; color: var(--pf-muted); } .pf-decision-step strong { font-size: 12px; line-height: 1.5; font-weight: 500; } .pf-decision-step p { margin: 0; font-size: 12px; line-height: 1.65; color: var(--pf-text); } /* ========================================================= 26 / FAQ ========================================================= */ .pf-faq { padding: 140px 0; background: var(--pf-soft-2); } .pf-faq-grid { display: grid; grid-template-columns: minmax(310px, .32fr) minmax(0, .68fr); gap: 110px; align-items: start; } .pf-faq-title { position: sticky; top: 155px; } .pf-faq-title h2 { max-width: 410px; margin: 0; font-size: clamp(42px, 4vw, 58px); line-height: 1.02; letter-spacing: -.04em; font-weight: 500; } .pf-faq-title p { max-width: 360px; margin: 23px 0 0; font-size: 13px; line-height: 1.72; color: var(--pf-muted); } .pf-accordion { width: 100%; border-top: 1px solid #CBC7C0; } .pf-faq-item { margin: 0; border-bottom: 1px solid #CBC7C0; } .pf-faq-item summary { position: relative; display: flex; align-items: center; min-height: 82px; padding: 22px 60px 22px 0; cursor: pointer; list-style: none; font-size: 18px; line-height: 1.45; font-weight: 500; color: var(--pf-dark); } .pf-faq-item summary::-webkit-details-marker { display: none; } .pf-faq-item summary::after { content: "+"; position: absolute; top: 50%; right: 4px; transform: translateY(-50%); font-size: 25px; line-height: 1; font-weight: 300; color: #706C65; } .pf-faq-item[open] summary::after { content: "−"; } .pf-faq-answer { max-width: 780px; padding: 0 60px 31px 0; font-size: 14px; line-height: 1.8; color: var(--pf-text); } .pf-faq-answer p { margin: 0; } .pf-faq-answer p + p { margin-top: 14px; } /* ========================================================= 27 / NOT A FORMULA ========================================================= */ .pf-formula { padding: 135px 0; background: var(--pf-soft); } .pf-formula-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .40fr); gap: 115px; align-items: start; } .pf-formula h2 { max-width: 770px; margin: 0; font-size: clamp(57px, 5.6vw, 82px); line-height: .93; letter-spacing: -.063em; font-weight: 400; } .pf-formula-list { border-top: 1px solid #C4C0B9; } .pf-formula-list div { padding: 15px 0; border-bottom: 1px solid #C4C0B9; font-size: 14px; line-height: 1.55; color: #555149; } /* ========================================================= 28 / STARTING POINT ========================================================= */ .pf-start { padding: 125px 0; background: var(--pf-warm); } .pf-start-head { max-width: 760px; margin-bottom: 60px; } .pf-start-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #C8C4BD; border-bottom: 1px solid #C8C4BD; } .pf-start-item { padding: 31px 28px 34px 0; } .pf-start-item + .pf-start-item { padding-left: 28px; border-left: 1px solid #C8C4BD; } .pf-start-item span { display: block; margin-bottom: 16px; font-size: 10px; line-height: 1.4; letter-spacing: .13em; color: #827E76; } .pf-start-item h3 { margin: 0 0 11px; font-size: 20px; line-height: 1.15; font-weight: 500; } .pf-start-item p { margin: 0; font-size: 12px; line-height: 1.65; color: var(--pf-text); } /* ========================================================= 29 / EXPLORE ========================================================= */ .pf-explore { padding: 115px 0; background: var(--pf-warm); border-top: 1px solid #C8C4BD; } .pf-explore-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, .42fr); gap: 105px; align-items: end; } .pf-explore h2 { max-width: 700px; margin: 0; font-size: clamp(45px, 4.3vw, 62px); line-height: 1; letter-spacing: -.045em; font-weight: 500; } .pf-explore-copy { max-width: 520px; margin: 23px 0 0; font-size: 14px; line-height: 1.74; color: var(--pf-text); } .pf-explore-links { border-top: 1px solid #C8C4BD; } .pf-explore-link { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 17px 0; border-bottom: 1px solid #C8C4BD; font-size: 13px; line-height: 1.5; text-decoration: none !important; transition: opacity .2s ease; } .pf-explore-link:hover { opacity: .6; } .pf-explore-link span:last-child { color: var(--pf-muted); } /* ========================================================= 30 / FINAL HELP ========================================================= */ .pf-final { padding: 130px 0 140px; background: var(--pf-night); color: var(--pf-light); } .pf-final-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 470px); gap: 110px; align-items: end; } .pf-final .pf-eyebrow { grid-column: 1 / -1; color: #A9A59D; } .pf-final .pf-eyebrow::before { background: #77736C; } .pf-final h2 { max-width: 800px; margin: 0; font-size: clamp(49px, 5vw, 72px); line-height: .99; letter-spacing: -.05em; font-weight: 400; color: var(--pf-light); } .pf-final-copy { margin: 0; font-size: 14px; line-height: 1.78; color: var(--pf-light-muted); } .pf-contact-meta { margin-top: 28px; border-top: 1px solid #4D4B46; } .pf-contact-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 20px; padding: 12px 0; border-bottom: 1px solid #4D4B46; } .pf-contact-row strong { font-size: 10px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: #A9A59D; } .pf-contact-row span, .pf-contact-row a { font-size: 12px; line-height: 1.6; color: #DDD9D2 !important; text-decoration: none; } .pf-final-link { display: inline-flex; margin-top: 25px; padding-bottom: 4px; border-bottom: 1px solid #CFCBC4; font-size: 13px; line-height: 1.4; color: var(--pf-light) !important; text-decoration: none !important; } /* ========================================================= LARGE DESKTOP >= 1440 ========================================================= */ @media screen and (min-width: 1440px) { .varenel-fit-guide .pf-container { width: min(1320px, calc(100% - 120px)) !important; max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important; } } /* ========================================================= DESKTOP / LAPTOP 1100 - 1439 ========================================================= */ @media screen and (min-width: 1100px) and (max-width: 1439px) { .varenel-fit-guide .pf-container { width: min(1180px, calc(100% - 80px)) !important; max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; } .pf-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(370px, 450px); gap: 75px; } .pf-sizes-head, .pf-post-grid, .pf-gauge-grid, .pf-measure-statement-grid, .pf-measure-grid, .pf-not-ear-grid, .pf-anatomy-grid, .pf-placement-layout, .pf-multi-grid, .pf-more-grid, .pf-healing-grid, .pf-look-grid, .pf-photos-grid, .pf-before-grid, .pf-between-grid, .pf-faq-grid, .pf-formula-grid, .pf-explore-grid, .pf-final-grid { gap: 75px; } } /* ========================================================= SMALL LAPTOP 901 - 1099 ========================================================= */ @media screen and (min-width: 901px) and (max-width: 1099px) { .varenel-fit-guide .pf-container { width: calc(100% - 56px) !important; margin-left: auto !important; margin-right: auto !important; } .pf-nav { top: 72px; } .pf-anchor { scroll-margin-top: 145px; } .pf-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 38%); gap: 55px; } .pf-hero-image, .pf-hero-image img { min-height: 560px; } .pf-sizes-head { gap: 55px; } .pf-size-grid, .pf-downsize-flow, .pf-start-grid, .pf-variable-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-size:nth-child(3), .pf-downsize-step:nth-child(3), .pf-start-item:nth-child(3), .pf-variable:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--pf-line); } .pf-size:nth-child(3), .pf-size:nth-child(4), .pf-start-item:nth-child(3), .pf-start-item:nth-child(4) { border-top-color: #C8C4BD; } .pf-size:nth-child(4), .pf-downsize-step:nth-child(4), .pf-start-item:nth-child(4), .pf-variable:nth-child(4) { border-top: 1px solid var(--pf-line); } .pf-size:nth-child(4), .pf-start-item:nth-child(4) { border-top-color: #C8C4BD; } .pf-post-grid, .pf-gauge-grid, .pf-measure-statement-grid, .pf-measure-grid, .pf-anatomy-grid, .pf-placement-layout, .pf-multi-grid, .pf-healing-grid, .pf-look-grid, .pf-before-grid, .pf-formula-grid, .pf-explore-grid { gap: 55px; } .pf-placement-layout { grid-template-columns: minmax(360px, 43%) minmax(0, 57%); } .pf-placement-ear { min-height: 560px; } .pf-measure-image, .pf-measure-image img { min-height: 540px; } .pf-measure-step { grid-template-columns: 42px 120px minmax(0, 1fr); } .pf-faq-grid { grid-template-columns: minmax(270px, .31fr) minmax(0, .69fr); gap: 55px; } } /* ========================================================= TABLET 769 - 900 ========================================================= */ @media screen and (min-width: 769px) and (max-width: 900px) { .varenel-fit-guide .pf-container { width: calc(100% - 48px) !important; margin-left: auto !important; margin-right: auto !important; } .pf-nav { top: 68px; } .pf-anchor { scroll-margin-top: 140px; } .pf-hero { padding: 80px 0 85px; } .pf-hero-grid { grid-template-columns: 1fr; gap: 53px; } .pf-hero-image, .pf-hero-image img { min-height: 620px; } .pf-two, .pf-sizes, .pf-post, .pf-gauge, .pf-gauge-compare, .pf-good-fit, .pf-measure-statement, .pf-measure, .pf-not-ear, .pf-anatomy, .pf-placement, .pf-multi, .pf-common, .pf-preference, .pf-more, .pf-healing, .pf-downsize, .pf-look, .pf-system, .pf-help-boundary, .pf-photos, .pf-before, .pf-between, .pf-faq, .pf-formula, .pf-start, .pf-explore { padding-top: 100px; padding-bottom: 100px; } .pf-sizes-head, .pf-post-grid, .pf-gauge-grid, .pf-measure-statement-grid, .pf-measure-grid, .pf-not-ear-grid, .pf-anatomy-grid, .pf-placement-layout, .pf-multi-grid, .pf-more-grid, .pf-healing-grid, .pf-look-grid, .pf-photos-grid, .pf-before-grid, .pf-between-grid, .pf-formula-grid, .pf-explore-grid { grid-template-columns: 1fr; gap: 43px; } .pf-size-grid, .pf-downsize-flow, .pf-start-grid, .pf-variable-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-size:nth-child(3), .pf-downsize-step:nth-child(3), .pf-start-item:nth-child(3), .pf-variable:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--pf-line); } .pf-size:nth-child(3), .pf-size:nth-child(4), .pf-start-item:nth-child(3), .pf-start-item:nth-child(4) { border-top-color: #C8C4BD; } .pf-size:nth-child(4), .pf-downsize-step:nth-child(4), .pf-start-item:nth-child(4), .pf-variable:nth-child(4) { border-top: 1px solid var(--pf-line); } .pf-size:nth-child(4), .pf-start-item:nth-child(4) { border-top-color: #C8C4BD; } .pf-post-diagram, .pf-ear-lineart, .pf-placement-ear { min-height: 520px; } .pf-measure-image, .pf-measure-image img { min-height: 570px; } .pf-placement-layout { grid-template-columns: 1fr; } .pf-faq-grid { grid-template-columns: 1fr; gap: 47px; } .pf-faq-title { position: static; } .pf-final-grid { grid-template-columns: 1fr; gap: 34px; } .pf-final .pf-eyebrow { grid-column: auto; } } /* ========================================================= MOBILE Piercing & Fit Guide A better fit starts with knowing what you're choosing. Post length determines how much wearable space sits between the decorative end and the flat back. Gauge determines the thickness of the post. Your anatomy, placement, angle, jewelry design, and personal preference all affect the final fit. Post Length Gauge Fully Healed Piercings Wearable Post Length 6 mm Example Only 1.2 mm · 16G Sizes Post Length Gauge Good Fit Measure Placement Healing Before Inserting FAQ Start With Two Measurements Post length and gauge do different jobs. 01 / Post Length 6 mm wearable space Post length determines how much usable space sits between the decorative end and the inner surface of the flat back. 02 / Gauge 1.2 mm post thickness · ≈ 16G Gauge describes the thickness of the post itself. Your piercing needs to be compatible with the gauge you choose. Varenel Post Sizes Four fixed combinations. Varenel currently uses four post-length and gauge combinations. The length and gauge are paired specifications rather than interchangeable options. 01 5 mm 1.0 mm post ≈ 18G One of Varenel's two 1.0 mm / 18G post options. 02 6 mm 1.2 mm post ≈ 16G One of Varenel's two 1.2 mm / 16G post options. 03 6.5 mm 1.0 mm post ≈ 18G The longer of Varenel's current 1.0 mm / 18G post options. 04 8 mm 1.2 mm post ≈ 16G The longer of Varenel's current 1.2 mm / 16G post options. Always check the individual product page for the exact post length and gauge offered for that specific design. Wearable Post Length Decorative Top Post Flat Back What Does Post Length Mean? It is the wearable space — not the entire earring. Post length refers to the wearable length between the back of the decorative end and the inner surface of the flat back. It is the portion that accommodates the tissue around your piercing. Decorative Top Not added to the listed wearable post length. Wearable Post The listed 5 mm, 6 mm, 6.5 mm, or 8 mm measurement. Flat-Back Thickness Not added to the listed wearable post length. What Does Gauge Mean? Gauge tells you how thick the post is. Varenel currently uses 1.0 mm and 1.2 mm posts. Lower gauge number = thicker post. 1.0 18G Approx. 1.0 mm 1.2 16G Approx. 1.2 mm 18G / 1.0 mm Slightly thinner. Varenel pairs 1.0 mm / approximately 18G posts with our 5 mm and 6.5 mm post-length options. 16G / 1.2 mm Slightly thicker. Varenel pairs 1.2 mm / approximately 16G posts with our 6 mm and 8 mm post-length options. Do not change gauge simply to access a preferred post length without first considering whether that gauge is appropriate for your piercing. What Does a Good Flat-Back Fit Look Like? Close, not compressed. 01 / May Be Too Short Too little room. Visible tissue compression Uncomfortably tight fit Very little comfortable clearance Difficult to clean around naturally 02 / Good Everyday Fit Enough wearable space. Sits naturally against the ear No visible compression Comfortable flat-back position No unnecessary extra movement 03 / May Be Longer Than Needed More room, more movement. More exposed post More back-and-forth movement More tilting or shifting Extra length may catch more easily These observations help describe fit but do not diagnose discomfort, swelling, irritation, or another piercing condition. The Better Starting Point Measure the jewelry, not your ear. If you already own a flat-back earring that fits the same piercing comfortably, it can be one of the most useful references for choosing your next post length. Use something you already know works. Measure the Wearable Post How to Measure Existing Jewelry Use the piece that already fits. A millimeter ruler or caliper can be useful for measuring the jewelry itself. 01 Remove Choose an existing flat-back earring that fits the same piercing comfortably. 02 Identify Find the wearable portion between the decorative end and inner surface of the flat back. 03 Measure Measure that wearable post length in millimeters. 04 Compare Compare the result with the size listed on the Varenel product page. Do not include the decorative top or the thickness of the flat-back disc in the wearable post measurement. Why not measure your ear directly? Soft tissue can compress. A ruler can sit at the wrong angle. A caliper can apply pressure. And visible ear thickness does not necessarily reflect the path of the piercing channel. If you do not have existing jewelry to use as a reference, an in-person professional piercer is generally a better fit assessment than trying to measure your ear at home. Soft Tissue Compression Piercing Angle Placement Depth Measurement Error Tissue Thickness Piercing Angle Placement Depth Ear Shape Anatomy Changes the Answer The same piercing name does not mean the same measurement. Placement tells you where the jewelry sits. Anatomy helps determine how much wearable length that placement requires. Tissue Thickness Ear thickness differs between people and between nearby placements. Piercing Angle The direction of the piercing channel affects how the jewelry sits. Placement Depth Two piercings with the same name may pass through different amounts of tissue. Ear Shape Curvature and surrounding anatomy influence fit and visual orientation. Piercing Placement Guide Know the location. Don't assume the length. These placement names help describe where jewelry sits. They are not universal post-length prescriptions. 01 Lobe Lower-ear tissue varies significantly in thickness. 02 Upper Lobe Nearby lobe placements may still require different lengths. 03 Helix Cartilage thickness and piercing angle can both affect fit. 04 Forward Helix Access and visibility can make professional installation useful. 05 Tragus The location can be difficult to see and handle yourself. 06 Conch Central cartilage thickness can vary considerably. 07 Flat Exact position and angle influence how the decorative top sits. One Ear, More Than One Length An ear stack doesn't need one universal post size. A lobe, upper lobe, helix, and flat can all sit through different tissue thicknesses and angles — even on the same ear. Two piercings that look close together can still need different dimensions. Different Placement · Different Anatomy Why Does My Earring Tilt? Movement has more than one cause. Extra post length can influence tilting, but so can piercing angle, curved anatomy, decorative-top dimensions, placement, external pressure, and natural movement. Post Length Angle Anatomy Top Size Pressure Why Is Part of the Post Showing? Visible post isn't automatically wrong. A small amount of clearance can be normal. If a significant amount remains exposed and the jewelry moves more than you prefer, you may prefer a closer fit once the piercing is fully healed. Clearance Movement Fit Preference Fit Preference Close or slightly relaxed can both be valid. Closer Fit A closer fit may reduce visible post and unnecessary movement once the piercing is fully healed, provided there is still enough comfortable wearable space. Slightly Relaxed Fit Some people simply prefer a little more room. More space can allow more movement, but that does not automatically make the fit incorrect. The jewelry should not need to compress the tissue simply to look fitted. Decorative top size matters too. Post length is not the only dimension that changes how jewelry looks. A small low-profile top can behave differently from a larger decorative design on curved anatomy or near other pieces. Review the decorative dimensions on the individual product page as well as the post specifications. 01 Post Length How much wearable space is available. 02 Gauge How thick the post is. 03 Anatomy How the ear is shaped and how much tissue is present. 04 Placement Where the piercing passes through the ear. 05 Angle The direction of the piercing channel. 06 Design The dimensions and profile of the decorative end. 07 Preference How closely you personally like the jewelry to sit. New & Healing Piercings A closer fit isn't the goal yet. This guide is primarily designed to help with jewelry selection for fully healed piercings. A new or healing piercing should not be treated as a simple aesthetic sizing decision. Have a qualified professional piercer determine appropriate gauge, post length, swelling allowance, placement, and fit. Swelling Allowance Gauge Post Length Placement Healing Progress Professional Assessment What Is Downsizing? A fit change guided by healing — not a fixed calendar. 01 Initial Jewelry Additional wearable length may sometimes be used to accommodate swelling. 02 Healing Changes Swelling and how the jewelry sits can change as healing progresses. 03 Professional Review A qualified piercer assesses the actual piercing and anatomy. 04 Downsize If Appropriate A shorter post may be chosen when the professional determines the extra space is no longer needed. There is no universal downsizing timeline. Timing varies by piercing, anatomy, placement, and healing progress. Don't downsize a healing piercing just for the look. A closer fit can look cleaner, but appearance should not override appropriate space during healing. If your initial jewelry has visible extra length, do not replace it with a shorter post solely to make it sit closer without professional guidance. Changing Gauge 16G and 18G are not simply style choices. A different gauge means a different post thickness. Do not force a thicker post through a piercing simply because you prefer the jewelry attached to it. If you are unsure whether changing gauge is appropriate, consult a qualified professional piercer. Internally Threaded Fit Length, gauge, and threading work together. Varenel flat-back earrings use internally threaded construction. The decorative end connects inside the post, making the post part of a complete functional system. Gauge Post Thickness Length Wearable Space Threading Functional Connection Who Can Help? We explain the jewelry. A piercer assesses the piercing. Varenel Customer Care Explain Varenel post lengths Explain 1.0 mm / 18G specifications Explain 1.2 mm / 16G specifications Compare Varenel product specifications Explain wearable post measurement Explain internally threaded construction Help you compare with existing jewelry Professional Piercer Confirm your current gauge Assess individual anatomy Assess healing piercings Evaluate swelling Guide downsizing Assess exact fit Assist difficult installation or removal Product education helps you understand the numbers. It cannot replace an in-person assessment of your piercing. Why we don't choose your size from a photo. Camera distance, lens perspective, cropping, head position, and image scale can all change how large an ear or piece of jewelry appears. A photograph also cannot reliably show the full thickness, path, or angle of the piercing channel. For that reason, Varenel does not select or guarantee individual post length based on ear photographs. Camera Distance Lens Perspective Image Scale Head Position Piercing Channel Before You Insert Check the specs first. Post Length Gauge Product Dimensions Placement & Fit Considerations Jewelry that has been inserted into a piercing — even briefly — is considered worn for hygiene purposes and is not eligible for a preference-based return, subject to applicable law. Returns & Exchanges → Between Two Lengths? Don't automatically choose shorter or longer. 01 Have a comfortable reference? Measure the existing jewelry first. 02 Is the piercing fully healed? If not, have a professional piercer guide the fit. 03 Is the gauge compatible? Match post thickness before treating length as the only variable. 04 Close or slightly relaxed? Consider your preferred wearable space once the piercing is stable. 05 Still unsure? An in-person professional piercer is more reliable than a generic chart. Fit Questions Small measurements. Practical answers. Common questions about flat-back post length, gauge, placement, anatomy, and choosing a better fit. What post length do I need for a flat-back earring? There is no universal length for every person or placement. Anatomy, piercing angle, location, jewelry design, and fit preference all affect the answer. If you already have a flat back that fits the same piercing comfortably, measuring its wearable post length is often the best starting point. What does a 6 mm post length mean? It means approximately 6 mm of wearable post length between the back of the decorative end and the inner surface of the flat back. It does not mean the entire earring measures 6 mm front to back. Is 1.0 mm the same as 18 gauge? Approximately, yes. In piercing jewelry, 1.0 mm commonly corresponds to 18G. Is 1.2 mm the same as 16 gauge? Approximately, yes. 1.2 mm commonly corresponds to 16G. Which is thicker, 16G or 18G? 16G is thicker. Gauge numbers run in the opposite direction many people initially expect: the lower gauge number represents the thicker post. How should a flat-back earring fit? For a fully healed piercing, it should provide enough wearable space to sit comfortably without visibly compressing the tissue, while avoiding more unnecessary movement than you prefer. Think: close, not compressed. Should a flat back sit completely flush against my ear? It can sit relatively close, but completely flush should not mean pressing firmly into the tissue. A small amount of natural clearance or movement can be normal. How do I know if my earring post may be too short? Visible compression, an uncomfortably tight fit, very limited clearance, or difficulty cleaning naturally around the jewelry can suggest that there may not be enough wearable space. These signs do not diagnose a piercing condition. Seek professional guidance for pain, swelling, or healing concerns. How do I know if my post may be longer than needed? A significant amount of exposed post, substantial back-and-forth movement, frequent tilting, or unnecessary snagging can indicate more extra length than you prefer. Can I use the same post length for every piercing? Not necessarily. Different placements — and even nearby piercings on the same ear — can pass through different tissue thicknesses and angles. What size post do I need for a lobe piercing? There is no universal lobe size. Use an existing comfortable piece as a reference when possible, or have a professional piercer assess your anatomy. What size flat back do I need for a helix? Helix does not automatically correspond to one post length. Cartilage thickness, placement depth, piercing angle, anatomy, and fit preference all affect the answer. Does anatomy affect post length? Yes. Anatomy is one of the main reasons universal placement-to-length charts can be misleading. Do healing piercings need longer posts? Initial jewelry may sometimes use additional post length to accommodate swelling. The amount needed and when it should change depend on the individual piercing and healing progress. A professional piercer should guide sizing for a healing piercing. What is piercing downsizing? Downsizing is the process of changing from initial jewelry with additional wearable length to a more fitted post when a professional piercer determines that the extra space is no longer needed. There is no universal downsizing timeline. Can I measure my piercing at home? We recommend measuring an existing well-fitting piece of jewelry rather than directly measuring or compressing your ear tissue. Can I measure my flat-back post with a ruler? Yes. A millimeter ruler can be useful for measuring the wearable length of an existing flat-back post. A caliper can also be useful for measuring jewelry itself. Avoid using a caliper to compress or directly measure the ear. Why does my flat-back earring tilt forward? Possible influences include extra post length, piercing angle, anatomy, decorative-top size, external pressure, and placement. Tilting alone does not necessarily indicate a defect. Why is part of my earring post showing? A small amount of visible post can be normal. If there is consistently significant extra length and excessive movement, you may prefer a closer fit once the piercing is fully healed. Can I switch from 16G to 18G? Changing gauge changes the thickness of the jewelry. If you are unsure whether changing gauge is appropriate, consult a professional piercer rather than treating gauge as a simple style preference. Can Varenel tell me my size from a photo? No. Camera perspective and scale make photographs unreliable for exact fit assessment, and an image cannot accurately show the thickness or path of the piercing channel. We can explain Varenel product measurements and help you compare them with existing jewelry, but we cannot guarantee individual fit from photographs. A Fit Guide, Not a Formula Simple answers aren't useful when they're wrong. Lobe ≠ one universal length. Helix ≠ one universal length. Conch ≠ one universal length. Placement tells you where. Anatomy helps determine fit. There is a reason we do not give you a chart that says “Lobe = 5 mm, Helix = 6 mm, Conch = 8 mm.” It would be simple. It would also ignore the person wearing the jewelry. Find Your Starting Point Four questions before you choose. 01 Already have a good fit? Measure the wearable post of the jewelry you already know works. 02 Know your gauge? Match post thickness before focusing only on length. 03 Fully healed? Consider wearable space and your preferred closer or relaxed fit. 04 Still unsure? A professional piercer is a better sizing tool than a generic chart. Explore Varenel Flat Backs Choose the design. Check the specs. Then decide. Review the exact post length and gauge listed on each product page before inserting your jewelry. Explore Flat-Back Earrings → 14K Solid Gold Guide → Jewelry Care Guide → Materials & Craftsmanship → Returns & Exchanges → Still Unsure About the Product Specs? We can explain the jewelry. Your piercer can assess your piercing. Our customer care team can explain Varenel post lengths, available gauge combinations, product dimensions, and internally threaded construction. For individual anatomy, healing, swelling, gauge changes, downsizing, or exact fit assessment, consult a qualified professional piercer. Email service@varenel.com Phone +852 9354 2389 Hours Monday–Friday · 9:00 AM–6:00 PM HKT Response Within 1–2 business days Contact Us →