Χωρίς δίπλωμα
The single source of truth for the MIMIKOS BOATS build — every colour, font, size, spacing rule and component, with exact values. In short: the developer imports the Rigrent template and replaces its colours and fonts with the ones below, so the whole template re-skins to this look. The rest of the document gives the exact spec for each piece, with copy-ready CSS where useful (e.g. buttons).
pelagos-dark.html (moodboard) and moodboard-internal.html (same page with semantic-tag annotations).An 8-colour system: a dark navy base, a light ink pair, and one blue brand family. Map these to Elementor ▸ Site Settings ▸ Global Colors.
rgba(255,255,255,.10 / .18 / .30); button hover = Blue darkened #013E78; the emphasis card = Surface + a soft blue glow; review stars use one warm #F5B740. Contrast: Ink & Muted are clear AA on Canvas; on-photo text always sits over the navy scrim gradient.One family: Inter. Headings are deliberately light (weight 600). Each style below is bound to an HTML tag — in Elementor, choose the matching Heading/Text widget tag and it inherits the spec. Use the alias class only when you need heading styling on a different tag.
h6 · alias .t-eyebrowclamp(34px,4.4vw,56px) · 600h1 · accent <b> = Skyclamp(25px,3vw,36px) · 600h2 · accent <b> = #5B9BDBh3Διαλέξτε το σκάφος σας και απολαύστε τη μέρα σας στον Παγασητικό.
.leadΚαλέστε μας ή στείλτε μήνυμα, απαντάμε αμέσως και βρίσκουμε μαζί το ιδανικό σκάφος για τη μέρα σας.
.t-smallh4Spacing runs on an 8px grid (base unit 8px, 4px half-step) and is fluid — gutter, section padding, header gap, grid gap and the CTA gap use clamp() so they scale smoothly between mobile and desktop, landing on grid values at both ends. Content caps at 1600px and centres.
The gap above is the live value clamp(16px, 2.5vw, 24px) — 24px on desktop, easing to 16px on mobile. Resize the window to watch it scale.
| Where | Value | Desktop | Mobile |
|---|---|---|---|
| Content width | max-width 1600px, centred | ≤1600 | full-bleed |
| Page gutter (L / R) | clamp(16px,5vw,80px) | 80px | 16px |
| Section · top & bottom padding | clamp(48px,8vw,96px) | 96px | 48px |
| Section heading → content below | clamp(32px,5vw,48px) | 48px | 32px |
| Grid gap (cards / columns) | clamp(16px,2.5vw,24px) | 24px | 16px |
| Card padding | clamp(16px,3vw,24px) | 24px | 16px |
| CTA two-column gap | clamp(24px,4vw,48px) | 48px | 24px |
| Gap · eyebrow → title | 16px | 16px | 16px |
| Gap · title → paragraph | 16px | 16px | 16px |
| Card · title→specs, specs→footer | 16px | 16px | 16px |
| Button icon gap | 8px | 8px | 8px |
clamp() so they scale smoothly between mobile and desktop — both endpoints land on the 8px grid. Radii: cards/panels 16px, buttons/tags/chips 999px (pill). Shadow: 0 24px 50px -30px rgba(2,10,44,.42) on raised cards. Column breakpoints: fleet 3→2-up ≤880 →1-up ≤560; trio / testimonials / category / location stack ≤880 / 760; ghost numbers hidden ≤760. Component padding (button 14×28, pill tags 6×13, chips 9×16) is each component’s own spec, not layout spacing.Pill buttons, weight 600. Primary = blue fill (the main call action). Use one primary per context.
| Button | Use | Spec |
|---|---|---|
| Καλέστε μας.btn-blue | Main action: "Καλέστε μας", "Καλέστε μας τώρα" | Blue #0056A7 fill, white text · hover #013E78 |
| Δείτε.btn-navy | Secondary action on dark cards | #0A1844 fill, hairline border · hover #122257 |
| Χάρτης.btn-ghost | Tertiary / "map", "review" | Transparent, border .18 white · hover white border |
| Καλέστε.btn-white | On dark photo CTA bands | White fill, navy text · hover Sky |
| Σε φωτο.btn-outline | On busy photography (hero) | Transparent, border .55 white · hover white fill |
| Δείτε →.btn-link / .call | Card CTA "Δείτε διαθεσιμότητα →" | 13px · 700 · #5B9BDB · arrow inline |
14px 28px, weight 600, 14.5px (no sm/lg variants used). All CTAs route phone-first: tel: for calls, #contact for "ask", mailto: / wa.me / Google Maps for utilities. No online booking..btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;
border-radius:999px;font:600 14.5px/1 "Inter";border:1.5px solid transparent;
cursor:pointer;transition:.2s;}
.btn-blue {background:#0056A7;color:#fff;} /* primary */
.btn-blue:hover {background:#013E78;}
.btn-navy {background:#0A1844;color:#fff;border-color:rgba(255,255,255,.18);}
.btn-navy:hover {background:#122257;}
.btn-ghost {background:transparent;border-color:rgba(255,255,255,.18);color:#fff;}
.btn-ghost:hover {border-color:#fff;}
.btn-white {background:#fff;color:#020A2C;} /* on photo bands */
.btn-white:hover {background:#BAD6EB;}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.55);color:#fff;}
.btn-outline:hover {background:#fff;color:#020A2C;}
The approved design is phone-first — there are no input forms. Contact is a list of channels: a round icon + an uppercase label + the value. If a contact form is added later it will be specced then, not invented here.
.contact-list): 44px round icon, hairline border; label 11.5px UPPERCASE Muted; value 15px white. Stacked 18px apart.The fleet card is the workhorse. Below: the live component, then the build spec for every text element.
| Element | HTML | Spec |
|---|---|---|
| Category tag | span .lic / .lic.free | Pill · 11px · 700 · UPPERCASE · tracking .06em · text #FFFFFF · radius 999px · padding 6×13px. .free (no-licence)=Blue #0056A7 fill; default (skipper)=#0A1844 fill |
| Boat name | heading 3 | 21px · 600 · #FFFFFF · line-height 1.25 |
| Specs | span (meta) | 13px · 600 · Muted #94A1C2 · flex, gap 8px×16px · items joined by a mid-dot " · " (U+00B7) |
| Price | div .price | main 21px · 800 · #FFFFFF · sub-line 12px · 500 · Muted #94A1C2 |
| CTA | a .call (text link) | 13px · 700 · #5B9BDB · trailing → arrow · href tel: |
#0A1330, hairline border, radius 16px. On hover: lift 4px + soft shadow, image scales 1.05. Image ratio 4 / 3.«Μια τέλεια μέρα στη θάλασσα. Το σκάφος ήταν άψογο και η εξυπηρέτηση ζεστή.»
rgba(255,255,255,.05) fill, .18 border. Stars in Gold. Quote 15.5px. Avatar = rounded square, Blue fill, initial. Name white, location Sky.
"Why us" trio
Three cells; the middle uses the emphasis fill #0F2350 with a soft blue glow shadow. Icon box 60px, rounded 16px.
The recurring elements that carry the Pelagos identity.
| Component | Notes |
|---|---|
| Eyebrow | Section label. h6 styling + a ⚓ anchor (17px) before the label. On photos it uses the Sky tint; light-blue elsewhere. |
| Sticky nav | Translucent navy rgba(2,10,44,.82) + blur, hairline bottom. Logo left; menu + blue CTA grouped right. Under 920px → hamburger + dark slide-in drawer. |
| Ghost section number | Giant outlined numeral behind each section header — -webkit-text-stroke 1.5px rgba(125,165,222,.14), transparent fill. Decorative; hidden <760px. |
| Hero | Full-bleed photo + diagonal navy scrim gradient. Eyebrow → H1 (accent word in Sky) → lead → actions → social row. |
| Location | Map placeholder (grid + pulsing pin + chip) beside a navy info card with opening hours. |
| CTA phone card | Dark frosted panel rgba(2,10,44,.55) + blur, hairline border — sits on the photo band for contrast; phone number white, label Sky. |
| Testimonial carousel | Three dots under the reviews grid (active = wide light-blue pill). Hints horizontal scroll when there are more than three reviews. |
| Hero motion | Background slow-zooms over 20s; eyebrow→social content rises in with an 80ms stagger. Both disabled under prefers-reduced-motion. |
| CTA band / Footer | Photo band with navy→blue gradient. Footer navy with a giant faint wordmark behind the columns. |
Inline SVG, outline ~2px stroke, rounded caps, 24×24 viewBox, single colour (currentColor). Every icon downloads as SVG (recolour via CSS color) or PNG (256px). Includes the brand ⚓ anchor.
currentColor so it inherits text colour in code; PNG is rasterised at 256px in #0056A7 on a transparent background. Need a different size or colour? Ask and I'll regenerate.