{"id":9,"date":"2026-09-14T05:51:16","date_gmt":"2026-09-14T05:51:16","guid":{"rendered":"https:\/\/bonitacontent.com\/?page_id=9"},"modified":"2026-09-14T06:56:58","modified_gmt":"2026-09-14T06:56:58","slug":"vip-portal","status":"publish","type":"page","link":"https:\/\/bonitacontent.com\/","title":{"rendered":"VIP PORTAL"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* Hero background with Miami night visual *\/\n.hero-wrapper {\n    position: relative;\n    padding: 60px 20px 40px 20px;\n    min-height: 80vh; \/* Ensures tall view on desktop *\/\n    display: flex;\n    align-items: center;\n    background-image: \n      linear-gradient(180deg, rgba(9, 11, 20, 0.35) 0%, rgba(9, 11, 20, 0.85) 75%, #090b14 100%),\n      url(\"https:\/\/bonitacontent.com\/wp-content\/uploads\/2026\/09\/IMG_5440.jpg\");\n    background-size: cover;\n    background-position: center 20%; \/* Centers the neon hotel lights *\/\n    background-repeat: no-repeat;\n  }\n\n\/* Position cutout cleanly on the right side on desktop *\/\n.hero-bg-img {\n  position: absolute;\n  right: 5%;\n  bottom: 0;\n  top: auto;\n  height: 90%;\n  width: auto;\n  max-width: 480px;\n  object-fit: contain;\n  object-position: bottom right;\n  z-index: 1;\n  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.7));\n}\n\n\/* Keep text above the image background *\/\n.hero-container {\n  position: relative;\n  z-index: 3;\n  max-width: 600px;\n  margin-right: auto;\n  margin-left: 0;\n}\n<\/style>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600;700;800&amp;family=Syne:wght@700;800&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n  :root {\n    --bg-dark: #090b14;\n    --neon-cyan: #00f0ff;\n    --neon-pink: #ff2a85;\n    --sunset-gold: #ffb86c;\n    --glass-bg: rgba(18, 22, 36, 0.75);\n    --glass-border: rgba(255, 255, 255, 0.12);\n  }\n\n  \/* Force full viewport reset *\/\n  html, body, .wp-site-blocks, .entry-content {\n    margin: 0 !important;\n    padding: 0 !important;\n    background-color: var(--bg-dark) !important;\n    max-width: 100% !important;\n    overflow-x: hidden;\n  }\n\n  .bonita-fullpage {\n    width: 100%;\n    min-height: 100vh;\n    background-color: var(--bg-dark);\n    color: #fff;\n    font-family: 'Outfit', sans-serif;\n  }\n\n  \/* Hero section with Miami Ocean Drive background *\/\n  .hero-wrapper {\n    position: relative;\n    padding: 50px 20px 30px 20px;\n    background-image: \n      linear-gradient(180deg, rgba(9, 11, 20, 0.4) 0%, rgba(9, 11, 20, 0.85) 75%, var(--bg-dark) 100%),\n      url(\"https:\/\/bonitacontent.com\/wp-content\/uploads\/2026\/09\/IMG_5440.jpg\");\n    background-size: cover;\n    background-position: center top;\n    background-repeat: no-repeat;\n  }\n\n  .hero-inner {\n    max-width: 1100px;\n    margin: 0 auto;\n    display: flex;\n    flex-direction: column-reverse; \/* Stack on mobile: portrait top, text below *\/\n    align-items: center;\n    gap: 32px;\n  }\n\n  @media (min-width: 860px) {\n    .hero-inner {\n      flex-direction: row; \/* Side-by-side on desktop *\/\n      justify-content: space-between;\n      padding: 40px 0;\n    }\n  }\n\n  \/* Text & CTA column *\/\n  .hero-content {\n    flex: 1;\n    max-width: 580px;\n    text-align: center;\n  }\n\n  @media (min-width: 860px) {\n    .hero-content {\n      text-align: left;\n    }\n  }\n\n  .brand-tag {\n    font-family: 'Syne', sans-serif;\n    font-size: 13px;\n    letter-spacing: 2.5px;\n    text-transform: uppercase;\n    color: var(--neon-cyan);\n    margin-bottom: 12px;\n    text-shadow: 0 0 12px rgba(0, 240, 255, 0.5);\n  }\n\n  .hero-title {\n    font-family: 'Syne', sans-serif;\n    font-size: clamp(28px, 4.5vw, 50px);\n    line-height: 1.15;\n    text-transform: uppercase;\n    background: linear-gradient(90deg, #ffffff, var(--sunset-gold));\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    margin-bottom: 14px;\n  }\n\n  .hero-subtitle {\n    font-size: clamp(13px, 1.8vw, 16px);\n    color: #b3b9c9;\n    margin-bottom: 26px;\n    line-height: 1.5;\n  }\n\n  \/* Portrait Visual Column *\/\n  .hero-visual {\n    flex: 1;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    max-width: 380px;\n  }\n\n  .portrait-card {\n    position: relative;\n    width: 100%;\n    max-width: 340px;\n    aspect-ratio: 3 \/ 4;\n    border-radius: 28px;\n    overflow: hidden;\n    border: 1px solid rgba(0, 240, 255, 0.4);\n    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9),\n                0 0 30px rgba(255, 42, 133, 0.3),\n                inset 0 0 25px rgba(0, 240, 255, 0.15);\n    background: #090b14;\n  }\n\n  .portrait-card img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center 15%;\n    display: block;\n    filter: contrast(115%) brightness(92%) saturate(105%);\n  }\n\n  \/* Radial & vertical vignettes to blend the portrait smoothly *\/\n  .portrait-card::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: radial-gradient(circle at 50% 35%, transparent 40%, rgba(9, 11, 20, 0.75) 85%, #090b14 100%),\n                linear-gradient(180deg, rgba(9, 11, 20, 0.3) 0%, transparent 25%, transparent 65%, #090b14 98%);\n    z-index: 2;\n    pointer-events: none;\n  }\n\n  .portrait-card::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(135deg, rgba(0, 240, 255, 0.12) 0%, transparent 50%, rgba(255, 42, 133, 0.15) 100%);\n    mix-blend-mode: color-dodge;\n    z-index: 3;\n    pointer-events: none;\n  }\n\n  \/* Action Buttons *\/\n  .btn-group {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    width: 100%;\n  }\n\n  @media (min-width: 520px) {\n    .btn-group {\n      flex-direction: row;\n    }\n  }\n\n  .btn-primary {\n    flex: 1;\n    background: linear-gradient(135deg, var(--neon-pink), #ff758c);\n    color: white;\n    font-weight: 700;\n    font-size: 14px;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    padding: 15px 24px;\n    border: none;\n    border-radius: 12px;\n    cursor: pointer;\n    box-shadow: 0 4px 20px rgba(255, 42, 133, 0.45);\n    transition: transform 0.2s ease;\n  }\n\n  .btn-secondary {\n    flex: 1;\n    background: rgba(255, 255, 255, 0.05);\n    backdrop-filter: blur(12px);\n    border: 1px solid var(--neon-cyan);\n    color: var(--neon-cyan);\n    font-weight: 600;\n    font-size: 14px;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    padding: 15px 24px;\n    border-radius: 12px;\n    cursor: pointer;\n    box-shadow: 0 0 14px rgba(0, 240, 255, 0.2);\n  }\n\n  \/* Content Cards Section *\/\n  .page-body {\n    max-width: 1100px;\n    margin: 0 auto;\n    padding: 30px 20px 60px 20px;\n  }\n\n  .section-title {\n    font-size: 13px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 1.5px;\n    color: #8a94a6;\n    margin-bottom: 16px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .media-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 14px;\n    margin-bottom: 36px;\n  }\n\n  .media-card {\n    background: var(--glass-bg);\n    border: 1px solid var(--glass-border);\n    border-radius: 16px;\n    padding: 12px;\n    text-align: center;\n    backdrop-filter: blur(10px);\n  }\n\n  .media-thumb {\n    height: 120px;\n    border-radius: 10px;\n    background: #192033;\n    margin-bottom: 10px;\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .media-thumb::after {\n    content: '\u25b6';\n    font-size: 14px;\n    color: white;\n    background: rgba(0, 0, 0, 0.5);\n    border-radius: 50%;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .media-card p {\n    font-size: 13px;\n    color: #cfd4e2;\n    font-weight: 500;\n  }\n\n  \/* Booking Box *\/\n  .booking-box {\n    background: var(--glass-bg);\n    border: 1px solid rgba(0, 240, 255, 0.25);\n    border-radius: 20px;\n    padding: 22px;\n    box-shadow: inset 0 0 25px rgba(0, 240, 255, 0.05);\n    backdrop-filter: blur(10px);\n  }\n\n  .slot-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));\n    gap: 10px;\n    margin-top: 12px;\n  }\n\n  .slot-pill {\n    background: linear-gradient(135deg, rgba(255, 42, 133, 0.15), rgba(0, 240, 255, 0.15));\n    border: 1px solid var(--neon-cyan);\n    border-radius: 10px;\n    padding: 12px;\n    font-size: 12px;\n    text-align: center;\n    color: #fff;\n    font-weight: 500;\n  }\n<\/style>\n\n<div class=\"bonita-fullpage\">\n  <!-- Hero Section with Miami Ocean Drive Background -->\n  <section class=\"hero-wrapper\">\n    <div class=\"hero-inner\">\n      <!-- Left Column: Copy & Actions -->\n      <div class=\"hero-content\">\n        <div class=\"brand-tag\">VIP Fan Portal<\/div>\n        <h1 class=\"hero-title\">Exclusive Vault &amp; Live VIP Sessions<\/h1>\n        <p class=\"hero-subtitle\">Direct access, custom content drops &amp; private 1-on-1 bookings.<\/p>\n\n        <div class=\"btn-group\">\n          <button class=\"btn-primary\">Unlock VIP Pass<\/button>\n          <button class=\"btn-secondary\">Book 1-on-1 Video Call<\/button>\n        <\/div>\n      <\/div>\n\n      <!-- Right Column: Framed Cutout Card -->\n      <div class=\"hero-visual\">\n        <div class=\"portrait-card\">\n          <img decoding=\"async\" src=\"https:\/\/bonitacontent.com\/wp-content\/uploads\/2026\/09\/IMG_5434.jpg\" alt=\"Client Portrait\" loading=\"eager\">\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Feed Grid & Booking Section -->\n  <div class=\"page-body\">\n    <div class=\"section-title\">\n      <span>Exclusive Content<\/span>\n      <span style=\"color: var(--neon-pink); cursor: pointer;\">View All \u2192<\/span>\n    <\/div>\n    <div class=\"media-grid\">\n      <div class=\"media-card\">\n        <div class=\"media-thumb\"><\/div>\n        <p>Studio High-Res<\/p>\n      <\/div>\n      <div class=\"media-card\">\n        <div class=\"media-thumb\"><\/div>\n        <p>Behind The Scenes<\/p>\n      <\/div>\n      <div class=\"media-card\">\n        <div class=\"media-thumb\"><\/div>\n        <p>VIP Vlogs<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- Booking Availability -->\n    <div class=\"booking-box\">\n      <div class=\"section-title\">\n        <span>Next Available Sessions<\/span>\n        <span style=\"color: var(--neon-cyan); cursor: pointer;\">Book Now<\/span>\n      <\/div>\n      <div class=\"slot-grid\">\n        <div class=\"slot-pill\">Tomorrow \u00b7 8:00 PM EST<\/div>\n        <div class=\"slot-pill\">Friday \u00b7 9:30 PM EST<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>VIP Fan Portal Exclusive Vault &amp; Live VIP Sessions Direct access, custom content drops &amp; private 1-on-1 bookings. Unlock VIP Pass Book 1-on-1 Video Call Exclusive Content View All \u2192 Studio High-Res Behind The Scenes VIP Vlogs Next Available Sessions Book Now Tomorrow \u00b7 8:00 PM EST Friday \u00b7 9:30 PM EST<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bonitacontent.com\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bonitacontent.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bonitacontent.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bonitacontent.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bonitacontent.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":5,"href":"https:\/\/bonitacontent.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/bonitacontent.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/bonitacontent.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}